Vue3.0 的自定义指令

我本人也是新手，所以我之前不知道自定义指令一般是在什么场景下用的。 在这里告诉各位新手朋友，我目前遇到的应用场景是在权限控制按钮、文本框等元素显示，就用上了这个自定义指令。我利用自己的一个案例进行介绍。

1.创建一个在util/directive/permission.ts 文件，代码如下：

点击查看代码

 
 export default function(app:any){
    app.directive('hasPermission', {
        mounted( el: any, binding: any ) {
            const {value} = binding;
            let permison="article:search,"
            let  flt=permison.split(',').includes(value[0]);
            console.log(flt)
            // const usersPermissions = localStorage.getItem('pid')?.split(',');
            // let f = usersPermissions?.filter((item:any) => {
            //     //some会循环所有元素，如果有一个元素满足则返回true并跳出循环，如果都没有则返回false
            //     return item.indexOf(value) !== -1;
            // });
            // if (!f) {
            //     ///如果不满足则通过dom元素销毁这个按钮
            //     el.parentNode && el.parentNode.removeChild(el);
            // }
            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>`  

这里我用中括号的原因是为了区分那个双冒号和单冒号。