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

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模板代码-->使用

    
	
		委托单
		流转卡
		样品标签
	

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模板代码-->使用

你可能感兴趣的:(vue.js,javascript,前端)