这段时间在进行一个新项目的前期搭建,新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量,所以基本没有使用额外的ui组件,有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令指令来开发一个表单验证插件的过程。
关于vue的插件开发,官方文档里有很清晰的说明,详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和装载时,对话框插件都是利用了这种方式。今天先来看表单验证插件的开发。
<强> vue全局指令
//myPlugin.js
出口默认{
安装:(Vue、期权)=比;{//注册一个my-directive指令
Vue。指令(my-directive, {
绑定,绑定(el vnode oldVnode) {//逻辑
}
…
})
}
}//main.js
从“进口Vue Vue ';
进口并且从‘并且’;
Vue.use(并且);
上面是注册一个vue指令插件的写法。值得注意的是注册自定义指令的时候,绑定()函数为指令的钩子函数,其中的参数el表示指令绑定的元素,可以直接操作DOM.binding表示一个对象,包括指令名称,绑定值等信息.vnode和oldVnode表示vue编译生成的虚拟节点。
我们通过注册一个全局指令v-validateParams指令,绑定到输入表单的输入标签上来校验当前输入值是否符合要求。
最开始我参考了网上的一些代码。基础的实现如下:
<强>整体框架
从“Vue”进口Vue
出口默认{
安装:(Vue、期权)=比;{//注册一个全局自定义指令“v-validateParams”
Vue。指令(validateParams, {//当被绑定的元素插入到DOM中时
插入:函数(el、绑定vNode) {//给指令绑定的Dom元素添加事件监听,监测输入框失焦事件//每次当表单中的输入框失焦时执行函数
埃尔。addEventListener(“模糊”,函数(事件){//1 .首先重置所有错误提示//2 .获取自定义指令中传入的校验规则参数和表单输入的值//3 .依次判断当前输入的值是否符合校验规则
})
}
})//注册一个全局自定义指令‘v-validateSubmit’,这个指令绑定到表单的提交按钮上
Vue。指令(validateSubmit, {//当被绑定的元素插入到DOM中时
插入:函数(el、绑定vNode) {//给提交按钮添加事件监听
埃尔。addEventListener(“点击”,函数(事件){//获取当前组件内所有含有v-check类名的元素
让元素=vNode.context。el.getElementsByClassName美元(“v-check”)
var evObj=vNode.context。el.createEvent美元(“事件”)
evObj。initEvent(“模糊”,真的,真的)
(让元素的元素){//给所有v-check元素绑定模糊事件
element.dispatchEvent (evObj);
}//获取当前组件下的所有错误提示元素
让errorInputs=vNode.context。美元el.getElementsByClassName(“输入错误”);//如果组件中没有错误提示元素,则执行当前组件实例中的提交()函数
如果(errorInputs。长度===0){
vNode.context.submit ();
}
})
}
})
}
}
这里需要着重说明一下validateSubmit指令,这个指令绑定到提交按钮上,在点击的时候执行校验,校验通过之后执行提交操作。但是这里的实现方式不是特别友好:
1。需要获取当前组件中的所有输入元素,给他们绑定并执行模糊事件,以此来执行validateParams指令中的校验逻辑。
2。需要获取当前组件中的所有错误提示元素,如果他们存在就不能执行提交操作。
3。当组件内不含任何错误提示元素时,就表示校验通过,执行当前组件内的提交函数,所以每个表单组件的提交函数都只能命名为提交
然后我们再看下指令validateParams,该指令需要绑定到表单输入元素上,并把校验规则当作参数写入。当该输入元素失焦时,会执行指令中给当前元素绑定的事件中的逻辑。这些逻辑分为三个步骤,我已经写在注释里了,现在我们来看下具体实现。
<强>重置所有错误提示
/* *
*重置当前节点样式
* @param el: HTMLElement,传入当前绑定的输入元素
*/const resetError=(el: HTMLElement)=比;{
埃尔。className=el.className。替换(“输入错误”,”).trim ();
如果(el)。parentNode) {
const ErrorNode=el.parentNode.querySelector (“.error-tips”);
如果(ErrorNode) {
el.parentNode.removeChild (ErrorNode);
}
}
