Vue2.x之自定义Vue指令

在Vue实例创建前创建自定义Vue指令，该指令则为全局指令。

 

Vue的静态方法directive自定义指令，注意点：

1、第一个参数为自定义的指令名称，指令名称定义和使用时有所不同。自定义的fxcShow在元素中使用时需要转换为v-fxc-show(前面自动加上v-，驼峰命名转化为小写并用-连接)

2、第二个参数是一个函数，该函数的第一个参数指向绑定的元素对象；第二个参数指向一个指令信息对象，该对象的value属性和oldValue分别为该指令在标签中对应的新老值。

?

1 2 3 4 5 6 7 8 9 10

<div v-fxc-show="flag">v-fxc-show</div>    Vue.directive('fxcShow', (dom, obj) => {     // console.log(dom, obj)       if (obj.value !== obj.oldValue) {         dom.style.display = obj.value ? '' : 'none';         // display设置为空即默认值block     } })

 

基于VUE的UI框架都有表单检测输入格式是否正确，就可以使用自定义指令来实现。

?

1 2 3

<input type="text" v-model="username"> <span v-ickt-check="username" test="^\w{4,8}$" error-text="用户名是4到8        位的字母数字下划线"></span>

 自定义指令：

1、获取test属性得到一个正则对象

2、匹配成功；匹配失败则获取error-text作为innerText显示在表单下面