参考视频
在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);}}}
在需要使用自定义指令的组件内使用
<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>
