/*** 自定义指令*/
import Vue from 'vue'/*** 模板* v-lang* 五个注册指令的钩子函数*/
Vue.directive('lang', {/*** 1.被绑定* 做绑定的准备工作* 比如添加事件监听器，或是其他只需要执行一次的复杂操作*/bind: function(el, binding, vnode) {console.log('1 - bind');},// 2.绑定到节点inserted: function(el, binding, vnode) {console.log('2 - inserted');},/*** 3.组件更新* 根据获得的新值执行对应的更新* 对于初始值也会调用一次*/update: function(el, binding, vnode, oldVnode) {console.log('3 - update');},// 4.组件更新完成componentUpdated: function(el, binding, vnode, oldVnode) {console.log('4 - componentUpdated');},/*** 5.解绑* 做清理操作* 比如移除bind时绑定的事件监听器*/unbind: function(el, binding, vnode) {console.log('5 - bind');}
})
/**
钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
*//**
钩子函数的参数：(el, binding, vnode, oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性name：指令名，不包含v-的前缀；value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}
vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
*/

/*** 自定义指令*/
import Vue from 'vue'/*** 聚集焦点*/
Vue.directive('focus', {// 当绑定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus();}
})/*** 钩子函数 bind update* 表单验证* v-check="{type:'date',val:currentDate}"*/
Vue.directive('check', {// 被绑定bind: function(){// 仅首次调用console.log('指定绑定成功');},// 组件更新update: function(el, binding){// 获取当前的值// console.log(binding.value);// 进行判断,避免同时触发多个判断if(binding.oldValue.val != binding.value.val){// 定义验证状态 局部变量let checkStatus = true;if(binding.value.type == 'phone'){// 验证手机号码if(!/^1(3|4|5|7|8)\d{9}$/g.test(binding.value.val)){checkStatus = false;}}else if(binding.value.type == 'date'){// 验证日期if(!/^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/g.test(binding.value.val)){checkStatus = false;}}else if(binding.value.type == 'identification_card'){// 验证身份证if(!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(binding.value.val)){checkStatus = false;}}else if(binding.value.type == 'email'){// 验证邮箱if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/g.test(binding.value.val)){checkStatus = false;}}else if(binding.value.type == 'zip_code'){// 验证邮编if(!/^\d{6}$/g.test(binding.value.val)){checkStatus = false;}}// checkStatus true 成功 false 失败if(checkStatus){el.style.border = "1px solid #ccc";}else{el.style.border = "1px solid red";}}}
})

<!-- 自定义指令 -->
<template><div><!-- 标题栏 --><mt-header title="自定义指令"><router-link to="/" slot="left"><mt-button icon="back">返回</mt-button></router-link></mt-header><!-- 内容 --><div><input type="text" v-check="{type:'phone',val:currentPhone}" placeholder="请输入手机号码" v-model="currentPhone" /><input type="text" v-check="{type:'date',val:currentDate}" placeholder="请输入日期" v-model="currentDate" /><input type="text" v-check="{type:'identification_card',val:currentIdentificationCard}" placeholder="请输入身份证" v-model="currentIdentificationCard" /><input type="text" v-check="{type:'email',val:currentEmail}" placeholder="请输入邮箱" v-model="currentEmail" /><input type="text" v-check="{type:'zip_code',val:currentZipCode}" placeholder="请输入邮编" v-model="currentZipCode" /></div></div>
</template><script>export default {name: 'Directive',data(){return {currentPhone: '',currentDate: '',currentIdentificationCard: '',currentEmail: '',currentZipCode: '',}},}
</script><style lang="less" scoped>// 输入框input[type="text"]{display: block;width: 90%;height: 40px;line-height: 40px;font-size: 16px;text-indent: 1em;margin: 5px auto;outline: none; // 清除input默认样式border: 1px solid #ccc;}// 按钮input[type="button"]{display: block;width: 70%;height: 40px;margin: 10px auto;}
</style>