Vue实战之掌握自定义指令

Vue.directive('mymodel', { //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 bind(el, binding, vnode, oldVnode) { }, //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中),需要父节点dom时使用这个钩子 inserted(el, binding, vnode, oldVnode) { }, //所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 update(el, binding, vnode, oldVnode) { }, //指令所在组件的 VNode **及其子 VNode** 全部更新后调用。 componentUpdated(el, binding, vnode, oldVnode) { }, 只调用一次，指令与元素解绑时调用。 unbind(el, binding, vnode, oldVnode) { }, })

Vue.directive('mymodel', { //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 bind(el, binding, vnode, oldVnode) { } })

//第一步，添加inout事件监听 el.addEventListener('input', (e) => { //context是input所在的父组件，这一步是同步数据 vnode.context[binding.expression] = e.target.value; }) //监听绑定的变量 vnode.context.$watch(binding.expression, (v) => { el.value = v; })

//监听绑定的变量 vnode.context.$watch(binding.expression, (v) => { el.value = v; })

Vue.directive('mymodel', { //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 bind(el, binding, vnode, oldVnode) { //原生input组件的处理 if(vnode.tag==='input'){ //第一步，添加inout事件监听 el.addEventListener('input', (e) => { //context是input所在的父组件，这一步是同步数据 vnode.context[binding.expression] = e.target.value; }) //监听绑定的变量 vnode.context.$watch(binding.expression, (v) => { el.value = v; }) }else{//组件 } } })

//vnode的结构可以参见文档。不过我觉得最直观的方法就是直接在控制台打印处理 let { componentInstance, componentOptions, context } = vnode; const { _props } = componentInstance; //处理model选项 if (!componentOptions.Ctor.extendOptions.model) { componentOptions.Ctor.extendOptions.model = { value: 'value', event: 'input' } } let modelValue = componentOptions.Ctor.extendOptions.model.value; let modelEvent = componentOptions.Ctor.extendOptions.model.event; //属性绑定，这里直接修改了属性，没有想到更好的办法，友好的意见希望可以提出 _props[modelValue] = binding.value; context.$watch(binding.expression, (v) => { _props[modelValue] = v; }) //添加事件处理函数,做数据同步 componentInstance.$on(modelEvent, (v) => { context[binding.expression] = v; })

//定义权限类型 const permissionType = { ROLE: 'role', CURRENTUSER:'currentUser', BUSSINESSSTATUS: 'bussinessStatus', MIX_EVERY: 'every', MIX_SOME: 'some' } export default { //只调用一次，指令第一次绑定到元素时调用 bind: function () { }, //当前vdom插入到真实dom时，因为是对dom的样式操作，在这里操作 inserted: function (el, binding) { let show = false; show=processingType(binding.arg,binding.value); el.style.display = `${show ? 'inline-block' : 'none'}` }, //所在组件的VNode更新时调用，状态更新后需要更新显示状态 update: function (el, binding) { //避免无效的模板更新 if(binding.value===binding.oldValue) return; let show = false; show=processingType(binding.arg,binding.value); el.style.display = `${show ? 'inline-block' : 'none'}` }, //指令所在组件的 VNode 及其子 VNode 全部更新后 componentUpdated: function (el, binding) { }, unbind: function () { }, } //处理不同类型的权限控制 function processingType(type,value){ let values=[]; switch (type) { case permissionType.ROLE: return permissionByRole(value); case permissionType.CURRENTUSER: return permissionCreater(value); case permissionType.BUSSINESSSTATUS: return permissionBusinessStatus(value); case permissionType.MIX_EVERY: for(let type in value){ values.push(processingType(type,value[type])) } return values.every(v=>{ return v; }) case permissionType.MIX_SOME: for(let type in value){ values.push(processingType(type,value[type])) } return values.some(v=>{ return v; }) default: return false; } } //业务状态判断 function permissionBusinessStatus(bindingValue){ return bindingValue.status==bindingValue.value; } //当前用户？ function permissionCreater(bindingValue){ const userInfo = JSON.parse(sessionStorage.CDTPcookie); // console.log(userInfo.userInfo.id,bindingValue) if(bindingValue instanceof Array){ return bindingValue.some(v=>{ return userInfo.userInfo.id==v; }) } return userInfo.userInfo.id==bindingValue; } //角色控制 export function permissionByRole(bindingValue) { //这里也可以是store里的用户信息 const userInfo = JSON.parse(sessionStorage.userInfo); let roles = [] if (userInfo) { roles = userInfo.roleList } let show = false; if (bindingValue instanceof Array) { return roles.some(role => {//多角色处理 return bindingValue.some(item => { return role.roleCode === item }) }) } else if (typeof bindingValue == 'string') { show = roles.some(role => { return role.roleCode === bindingValue; }) } return show; }

//角色权限  //判断当前登录人  //判断业务状态  //角色是leader或者是当前订单的创建者,有权限  //角色是leader并且是当前订单的创建者,有权限 

export default { inserted: function (el, binding, vnode) { el.addEventListener('input', function (e) { if (binding.arg == 'toFixed') { //限制输入n位小数点 toFiexd(e.target, vnode, binding.value) } else { //限制数字输入 Integer(e.target, vnode) } }) }, } function toFiexd(target, vnode, v) { console.log(v); let ln = 2; if (v) { ln = v; } var regStrs = [ ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0 ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点 ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点 ['^(\\d+\\.\\d{' + ln + '}).+', '$1'] //禁止录入小数点后两位以上 ]; for (var i = 0; i 

vnode.componentInstance.$listeners.input(target.value)

export default { bind:function(){ }, inserted:function(el,binding){ dealContent(el,binding) }, update:function(el,binding){ dealContent(el,binding) }, componentUpdated:function(){ }, unbind:function(){ }, } function dealContent(el,binding){ const {arg}=binding; if(arg=='empty'){ if(!el.textContent){//空值显示 el.textContent=binding.value||'暂无数据'; } }else if(arg=='money'){//金额千分位逗号分割，如10000000显示为100,000,00 if (binding.value) { el.textContent = dealMoney(binding.value); }else { el.textContent = dealMoney(el.textContent); } } }

//金额处理 export function dealMoney(money, places = 2) { const zero = `0.00`; if (isNaN(money) || money === '') return zero; if (money && money != null) { money = `${money}`; let left = money.split('.')[0]; // 小数点左边部分 let right = money.split('.')[1]; // 小数点右边 // 保留places位小数点，当长度没有到places时，用0补足。 right = right ? (right.length >= places ? '.' + right.substr(0, places) : '.' + right + '0'.repeat(places - right.length)) : ('.' + '0'.repeat(places)); var temp = left.split('').reverse().join('').match(/(\d{1,3})/g); // 分割反向转为字符串然后最多3个，最少1个，将匹配的值放进数组返回 return (Number(money) <0 ? '-' : '') + temp.join(',').split('').reverse().join('') right;>

{{message}}100000

import {isOffic,isPdf,isImage} from '@/utils/base' import {previewWithOffice} from '@/utils/fileUtils.js' export default { inserted:function(el,binding){ el.onclick=function(e){ let params = binding.value if(isOffic(params.name)){ e.preventDefault() e.stopPropagation() previewWithOffice(params.url)//使用office在线预览打开 }else if(isPdf(params.name) || isImage(params.name)){ e.preventDefault() e.stopPropagation() if(params.url){//直接打开url previewFile(params) } } } }, //指令所在组件的 VNode 及其子 VNode 全部更新后 componentUpdated: function (el, binding) { el.onclick=function(e){ let params = binding.value if(isOffic(params.name)){ //使用插件预览Office文件 e.preventDefault() e.stopPropagation() previewWithOffice(params.url) }else if(isPdf(params.name) || isImage(params.name)){ //预览图片和pdf等能直接打开的文件 e.preventDefault() e.stopPropagation() previewFile(params) } } }, unbind(el){ el.onclick=null; } } //预览图片和pdf等能直接打开的文件 function previewFile(params) { let a = document.createElement("a"); a.download = params.name a.href = params.url; a.target = "_blank"; a.click(); a = null; }

{{file.name}}