自定义权限指令与防止连点指令

1.权限指令

// 注册一个全局自定义权限指令 `v-permission`
Vue.directive('permission', {inserted: function(el, binding, vnode) {const {value} = binding; // 指令传的值// 'user:edit:phone','sysData:sample'const permissions = ['user:edit:address', 'sysData:entrust', 'sysData:flow']; // 自己拥有的所有权限if (value && value instanceof Array && value.length > 0) {const permissionFlag = value; // 元素上的权限const hasPermissions = permissions.some(permission => {return permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {uni.showToast({title: '请设置操作权限标签值',icon: 'none'})}}
})

1.1模板代码-->使用

    <button v-permission="['user:edit:address','user:edit:phone']">自定义权限指令</button><view class="tabs"><view v-permission="['sysData:entrust']">委托单</view><view v-permission="['sysData:flow']">流转卡</view><view v-permission="['sysData:sample']">样品标签</view></view>

1.1运行结果

2. 防止连点指令

// 注册一个全局自定义防抖指令 `v-debounce`  连点多次只执行最后一次
Vue.directive('debounce', {inserted: function(el, binding, vnode) {let timer;el.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value()}, binding.arg || 500)})}
})

2.1模板代码-->使用

<button v-debounce:500="customFunc">自定义防抖指令</button>