VUE3 怎么自定义全局指令实现按钮权限控制

前言

在vue当中，有很多自带可以供我们使用的指令，比如v-if,v-for,v-show...那我们有没有办法自定义类似的指令去实现一些特定的功能呢？答案无可厚非是可以的。下面来看个例子。

需求

在公司里面有这样一个需求很常见，在做权限管理这块，不同权限的操作人员可以对不同的按钮进行操作来实现按钮的权限控制。那么在众多的按钮里，我们怎么去控制这些按钮根据不同的操作员来显示呢，这就需要我们去自定义指令实现。话不要多说下面直接上代码。

实现

实现分为下面三个简单的步骤：

自定义指令

在src目录下新建一个directives文件夹，新建文件permission.ts：

import { Directive } from 'vue';

export const permission: Directive = {
    mounted(el, binding) {
        const { value } = binding;
        //permissionButtton是我模拟后端传回来的数据，这个数据一般登陆后会存到store或者localStorage
        //里面，我这里为了简单演示，直接写死
        const permissionButtton = ['add', 'update', 'delete'];
        if (value && value instanceof Array && value.length > 0) {
            const hasPermission = permissionButtton.some((role: string) => {
                return value.includes(role);
            });
            if (!hasPermission) {
                el.style.display = 'none';
            }
        } else {
            throw new Error('No permission !');
        }
    },
};

新建index.ts

export * from './permission';

在main.ts里面进行全局注册

import { createApp, Directive } from 'vue';
import App from './App.vue';
import * as directives from './directives';

const app = createApp(App);

Object.keys(directives).forEach(key => {
    app.directive(key, (directives as { [key: string]: Directive })[key]);
});

app.mount('#app');

最后就是在任意vue文件里面使用指令

//有add权限才会显示此按钮
<button v-permission="['add']">add</button>
//有update权限才会显示才按钮
<button v-permission="['update']">update</button>
//有delete权限才会显示才按钮
<button v-permission="['delete']">delete</button>

总结

以上就是用自定义指令实现了对按钮权限的控制，整个过程还是相对简单的，如果以后有类似的需求，就可以用这种方法去解决，希望这篇文章可以帮到大家，谢谢！