我本人也是新手，所以我之前不知道自定义指令一般是在什么场景下用的。 在这里告诉各位新手朋友，我目前遇到的应用场景是在权限控制按钮、文本框等元素显示，就用上了这个自定义指令。我利用自己的一个案例进行介绍。
1.创建一个在util/directive/permission.ts 文件，代码如下：
export default function(app:any){ app.directive('hasPermission', { //hasPermission就是你的属性，但是尽量不要使用人家内置的属性，比如show、bind这些 mounted( el: any, binding: any ) { const {value} = binding; let permison="article:search," //这里的值是你的权限字符 let flt=permison.split(',').includes(value[0]);//进行逗号转成数组之后，匹配是否存在 if(!flt){ //如果不存在，讲元素进行移除 el.parentNode && el.parentNode.removeChild(el); } } }) }
2.在man.ts 进行引入，这里的就是做一个全局注册
`import registPermission from './util/directive/permission'
const app =createApp(App)
registPermission(app);
`
3.使用方式和属性一样,这里的v-hasPermission就是自定义的指令
<el-button type="primary" v-hasPermission="['article:search']"></el-button>
这里我用中括号的原因是为了区分那个双冒号和单冒号。