基于element-ui的input二次封装,实现表单单个认证

由于项目有很多表单,很多都是一个,所以想起了封装input组件好了

实现思路:因为本身表单就有验证,所以结合了表单的部分认证去实现,可以自己进行自定义模板操作

代码如下:

大家视情况,有些是不用点击事件触发的,按钮可以视情况而定

基于element-ui的input二次封装,实现表单单个认证

props主要接收两个参数:input框类型,还有一个是验证的类型,因为我这里有textarea验证,限制长度,

验证内容自定义,根据实际需求

基于element-ui的input二次封装,实现表单单个认证

基于element-ui的input二次封装,实现表单单个认证

基于element-ui的input二次封装,实现表单单个认证

通过watch监听type的变化改变ruleForm下面的变量

基于element-ui的input二次封装,实现表单单个认证

这个要注意,trigger如果是相对于多种方法必须要使用数组,这里的认证规则大家也是根据需求,这里不做过多累赘

基于element-ui的input二次封装,实现表单单个认证

组件中引入相信大家都知道怎么用了,也不做过多叙述了,下班下班