Vue自定义指令如何改写validate.js成长尾词？

本文共计2190个文字，预计阅读时间需要9分钟。

这段时期正在进行一个新项目的初期搭建，项目框架采用vue-cli3和TypeScript构建。由于项目相对轻量，基本没有使用额外的UI组件库，所需的一些基础组件则直接自行开发。

这段时间在进行一个新项目的前期搭建，新项目框架采用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。