1.自定义指令
<!-- template -->
<div v-permission="['admin', 'editor']">
这是需要权限的内容
</div>
// JavaScript
Vue.directive('permission', {
inserted: function (el, binding) {
// 获取权限列表
const permissionList = binding.value;
// 模拟用户的角色
const userRole = ['admin', 'editor'];
// 判断用户的角色是否包含权限列表中的任意一个
const hasPermission = userRole.some(role => permissionList.includes(role));
// 如果用户有权限,则显示元素;否则隐藏元素
if (!hasPermission) {
el.style.display = 'none';
}
}
});
// 创建 Vue 实例
new Vue({
el: '#app'
});