一.具体思路
由于element单独的el-input标签没有醒目的提示语，如果通过el-form表单的形式可以，但又太麻烦没那必要增加那么多标签，业务需求只需要一个输入框，所以这边对其进行个简单的封装，这边图个方便没使用原生的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订阅，通过子组件传进来的参数判断
图三
网友评论