这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。
1.vue插件开发
关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和loading，messageBox插件都是利用了这种方式。今天先来看表单验证插件的开发。
vue全局指令
// myPlugin.js
export default {
install: (Vue, options) => {
// 注册一个my-directive指令
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑
}
...
})
}
}
// main.js
import Vue from 'vue';
import myPlugin from 'myPlugin';
Vue.use(myPlugin);上面是注册一个vue指令插件的写法。值得注意的是注册自定义指令的时候，bind()函数为指令的钩子函数，其中的参数el表示指令绑定的元素，可以直接操作DOM。binding表示一个对象，包括指令名称，绑定值等信息。vnode和oldVnode表示Vue编译生成的虚拟节点。
我们通过注册一个全局指令v-validateParams指令，绑定到输入表单的input标签上来校验当前输入值是否符合要求。
2.v-validateParams指令
最开始我参考了网上的一些代码。基础的实现如下：
整体框架
import Vue from 'vue'
export default {
install: (Vue, options) => {
// 注册一个全局自定义指令 `v-validateParams`
Vue.directive('validateParams', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el, binding, vNode) {
// 给指令绑定的Dom元素添加事件监听，监测输入框失焦事件
// 每次当表单中的输入框失焦时执行函数
el.addEventListener('blur', function (event) {
// 1.首先重置所有错误提示
// 2.获取自定义指令中传入的校验规则参数和表单输入的值
// 3.依次判断当前输入的值是否符合校验规则
})
}
})
// 注册一个全局自定义指令 `v-validateSubmit`，这个指令绑定到表单的提交button上
Vue.directive('validateSubmit', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el, binding, vNode) {
// 给提交button添加事件监听
el.addEventListener('click', function (event) {
// 获取当前组件内所有含有v-check类名的元素
let elements = vNode.context.$el.getElementsByClassName('v-check')
var evObj = vNode.context.$el.createEvent('Event')
