vue自定义指令来控制按钮权限

参考视频

• 在src下新建directives/has.js文件用来创建自定义指令

export default {
	bind(el, bindings) { // bind钩子函数,接收两个参数
		// console.log('指令绑定到元素上的时候');
		// 所有权限
		const permissions = JSON.parse(localStorage.getItem('permissions'));
		// 需要的权限
		const needPermission = bindings.value; // 获取自定义指令传递过来的值
		// 判断是否有权限
		const hasPermission = permissions.includes(needPermission);
		if (!hasPermission) {
			el.style.display = 'none'; // 由于display:none可操作，所以需要在dom树上删除这个节点
			setTimeout(() => {
				el.parentNode.removeChild(el); // 找到当前父节点删除父节点下面的子节点。
			}, 0);
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 在需要使用自定义指令的组件内使用

<template>
	<div>
		<button v-has="'add'">添加</button>
		<button v-has="'edit'">编辑</button>
		<button v-has="'delete'">删除</button>
	</div>
</template>
<script>
import hasDirective from './directives/has';

export default {
	name: 'App',
	directives: {
		has: hasDirective, // 加载自定义指令后上面就可以v-has使用了
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17