Vue2.x之自定义Vue指令

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

 

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

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

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

        <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框架都有表单检测输入格式是否正确，就可以使用自定义指令来实现。

	<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显示在表单下面