一、element-ui输入框的怎么获取change事件返回的值
1、首先第一步，这时候我们使用vue-cli脚手架工具创建一个vue项目，注意都是然后引入element-ui框架（不会的详情参考下面经验），详细目录文件如下图。
2、接着我们就要前往element-ui官网，然后就要找到输入框input组件，注意的是要看看有什么方法可以获取input的值，change事件可以实现这个功能，详细如下图。
3、接着就是要把element-ui输入框组件放到我们项目中，代码以及效果如下图。
4、然后就是要在输入框组件中绑定一个change事件（用法@change=""），这时候监听绑定v-model的值就可以了。
5、最后一步就是用命令行工具，然后运npm run dev，然后注意都是利用配置的地址打开网页，在输入框输入不同的内容都能监听到。
二、Element-Ui组件 MessageBox 弹框
官方文档 http://element-cn.eleme.io/#/zh-CN/component/message-box
基础用法
消息提示弹框
```
点击打开 Message Boxexportdefault{ methods:{ open(){this.$alert('这是一段内容','标题名称',{ confirmButtonText:'确定', callback: action=>{this.$message({ type:'info', message: `action:${ action}` }); } }); } } }
点击打开 Message Boxexportdefault{ methods:{ open(){this.$alert('这是一段内容','标题名称',{ confirmButtonText:'确定', callback: action=>{this.$message({ type:'info', message: `action:${ action}`});}});}}}点击打开 Message Boxexportdefault{ methods:{ open(){this.$alert('这是一段内容','标题名称',{ confirmButtonText:'确定', callback: action=>{this.$message({ type:'info', message: `action:${ action}`});}});}}}<template>
<el-button type="text"@click="open">点击打开 Message Box</el-button>
</template>
<script>
export default{
methods:{
open(){
this.$alert('这是一段内容','标题名称',{
confirmButtonText:'确定',
callback: action=>{
this.$message({
type:'info',
message: `action:${ action}`
});
}
});
}
}
}
</script>
```
确认消息弹框
```
点击打开 Message Boxexportdefault{methods:{ open2(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({ type:'success', message:'删除成功!'}); }).catch(()=>{this.$message({ type:'info', message:'已取消删除'}); }); } } }
<template>
<el-button type="text"@click="open2">点击打开 Message Box</el-button>
</template>
<script>
export default{
methods:{
open2(){
this.$confirm('此操作将永久删除该文件,是否继续?','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{
this.$message({
type:'success',
message:'删除成功!'
});
}).catch(()=>{
this.$message({
type:'info',
message:'已取消删除'
});
});
}
}
}
</script>
```
提交内容弹框
```
点击打开 Message Boxexportdefault{methods:{ open3(){this.$prompt('请输入邮箱','提示',{confirmButtonText:'确定',cancelButtonText:'取消',inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:'邮箱格式不正确'}).then(({ value})=>{this.$message({ type:'success', message:'你的邮箱是:'+ value }); }).catch(()=>{this.$message({ type:'info', message:'取消输入'}); }); } } }
<template>
<el-button type="text"@click="open3">点击打开 Message Box</el-button>
</template>
<script>
export default{
methods:{
open3(){
this.$prompt('请输入邮箱','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage:'邮箱格式不正确'
}).then(({ value})=>{
this.$message({
type:'success',
message:'你的邮箱是:'+ value
});
}).catch(()=>{
this.$message({
type:'info',
message:'取消输入'
});
});
}
}
}
</script>
```
自定义弹框
```
点击打开 Message Boxexportdefault{methods:{ open4(){consth=this.$createElement;this.$msgbox({title:'消息',message: h('p',null, [ h('span',null,'内容可以是'), h('i',{style:'color: teal'},'VNode') ]),showCancelButton:true,confirmButtonText:'确定',cancelButtonText:'取消',beforeClose:(action, instance, done)=>{if(action==='confirm'){ instance.confirmButtonLoading=true; instance.confirmButtonText='执行中...'; setTimeout(()=>{ done(); setTimeout(()=>{ instance.confirmButtonLoading=false; },300); },3000); }else{done(); } } }).then(action=>{this.$message({ type:'info', message:'action:'+ action }); }); } } }
<template>
<el-button type="text"@click="open4">点击打开 Message Box</el-button>
</template>
<script>
export default{
methods:{
open4(){
const h= this.$createElement;
this.$msgbox({
title:'消息',
message: h('p', null, [
h('span', null,'内容可以是'),
h('i',{ style:'color: teal'},'VNode')
]),
showCancelButton: true,
confirmButtonText:'确定',
cancelButtonText:'取消',
beforeClose:(action, instance, done)=>{
if(action==='confirm'){
instance.confirmButtonLoading= true;
instance.confirmButtonText='执行中...';
setTimeout(()=>{
done();
setTimeout(()=>{
instance.confirmButtonLoading= false;
}, 300);
}, 3000);
} else{
done();
}
}
}).then(action=>{
this.$message({
type:'info',
message:'action:'+ action
});
});
}
}
}
</script>
```
options：
参数类型说明可选值默认值
titleMessageBox标题string——
messageMessageBox消息正文内容string/ VNode——
dangerouslyUseHTMLString是否将 message属性作为 HTML片段处理boolean—false
type消息类型，用于显示图标stringsuccess/ info/ warning/ error—
customClassMessageBox的自定义类名string——
callback若不使用 Promise，可以使用此参数指定 MessageBox关闭后的回调function(action, instance)，action的值为’confirm’或’cancel’, instance为 MessageBox实例，可以通过它访问实例上的属性和方法——
showCloseMessageBox是否显示右上角关闭按钮boolean—true
beforeCloseMessageBox关闭前的回调，会暂停实例的关闭function(action, instance, done)，action的值为’confirm’或’cancel’；instance为 MessageBox实例，可以通过它访问实例上的属性和方法；done用于关闭 MessageBox实例——
lockScroll是否在 MessageBox出现时将 body滚动锁定boolean—true
showCancelButton是否显示取消按钮boolean—false（以 confirm和 prompt方式调用时为 true）
showConfirmButton是否显示确定按钮boolean—true
cancelButtonText取消按钮的文本内容string—取消
confirmButtonText确定按钮的文本内容string—确定
cancelButtonClass取消按钮的自定义类名string——
confirmButtonClass确定按钮的自定义类名string——
closeOnClickModal是否可通过点击遮罩关闭 MessageBoxboolean—true（以 alert方式调用时为 false）
closeOnPressEscape是否可通过按下 ESC键关闭 MessageBoxboolean—true（以 alert方式调用时为 false）
closeOnHashChange是否在 hashchange时关闭 MessageBoxboolean—true
showInput是否显示输入框boolean—false（以 prompt方式调用时为 true）
inputPlaceholder输入框的占位符string——
inputType输入框的类型string—text
inputValue输入框的初始文本string——
inputPattern输入框的校验表达式regexp——
inputValidator输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串,则返回结果会被赋值给 inputErrorMessagefunction——
inputErrorMessage校验未通过时的提示文本string—输入的数据不合法!
center是否居中布局boolean—false
roundButton是否使用圆角按钮boolean—false
三、关于VUE中input输入后出现下拉框出现提示的小技巧
怎么在VUE中出现类似于百度，谷歌那种输入后出现下拉提示框？
由于我用的是饿了么开发的element-ui前端开发框架，所以可以用element-ui的input组件中的 el-autocomplete http://element-cn.eleme.io/#/zh-CN/component/input
这是例子的中算法。其实很简单，就是indexOf的简单应用。
但是这个===0只能从开头匹配。全字段匹配就要改成>-1
可以参考我自己写的例子
Github: https://github.com/fredfeng0326/inputsearch
实例地址:< https://fredfeng0326.github.io/inputsearch/
四、使用vue在element的基础上封装带提示的input输入框
1.分析需求
当用户输入为空提交时，出现底部提示，输入框变为醒目的红色
2.具体操作
首先在hello.vue文件下,绑定具体的字段让父组件监听，动态调节，具体字段仅添加一下几个，还可自行根据需求拓展
1.如图所示在文件下我新建了el-input输入框，通过show判断是否为空，为空时改变其border-color，不为空则正常边框颜色，type为其类型可选number，text.... ，max，min为用户可输入最大最小字段,size可控制输入框的高度大小，errmessage为提示的字段，@blur为失去焦点触发的事件
如图二所示
在这里我通过props接收父组件传过来的参数，通过this.$emit将事件发布到父组件，把表单的绑定值作为实参传入
2.父组件通过import将组件引用，通过components将其引入如上几个字段就是传递给子组件的参数，这里就不细讲，当然这值可以通过v-bind动态绑定，在这里我绑定了show(通过输入框失去焦点，如果值为空将其设为true)以及err(提示的字段)，图三为具体的方法，父组件通过on订阅，通过子组件传进来的参数判断
关于组件-Element---Input(输入框)_element input到此分享完毕，希望能帮助到您。
