使用vue在element的基础上封装带提示的input输入框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vue在element的基础上封装带提示的input输入框相关的知识，希望对你有一定的参考价值。
参考技术A 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订阅，通过子组件传进来的参数判断
以上是关于使用vue在element的基础上封装带提示的input输入框的主要内容，如果未能解决你的问题，请参考以下文章
vue中对element的弹框messagebox的二次封装
Vue项目中提示JSHint: import is only available in ES6 (use esversion: 6)解决
vue+element 支持模糊搜索的多选下拉列表封装(可直接使用)
[vue/require-v-for-key] Elements in iteration expect to have 'v-bind:key' directives；清除错误提示