按钮权限-自定义指令

在 Vue 3 中，可以通过自定义指令来实现按钮权限控制。该指令可以根据用户的权限动态显示或隐藏按钮。

1. 创建指令 首先，创建一个名为 permission 的自定义指令。

    // src/directives/permission.ts 
    import { Directive, DirectiveBinding } from 'vue' 
    const hasPermission = (permission: string): boolean => { 
        // 在这里实现根据权限判断逻辑，返回一个布尔值 
        // 根据实际需求，你可以从后端获取用户权限信息，然后在此进行判断 
        // 返回 true 表示有权限，返回 false 表示无权限 
        // 这里只是一个示例，你需要根据自己的业务逻辑进行修改 
        const userPermissions = ['buttonA', 'buttonB', 'buttonC'] 
        return userPermissions.includes(permission) 
    } 
    const permissionDirective: Directive = { 
        mounted(el: HTMLElement, binding: DirectiveBinding) { 
            const { value } = binding 
            const permission = value as string 
            if (!hasPermission(permission)) { 
                el.style.display = 'none' 
            } 
        } 
    } 
    export default permissionDirective

2.注册指令

    // src/main.ts 
    import { createApp } from 'vue' 
    ...
    import permissionDirective from './directives/permission' 
    const app = createApp(App) 
    app.directive('permission', permissionDirective) 
    app.mount('#app')

3.使用指令

在需要进行按钮权限控制的地方，使用 v-permission 指令，并将按钮的权限作为参数传递给指令。

    <template> 
        <button v-permission="'buttonA'">Button A</button> 
        <button v-permission="'buttonB'">Button B</button> 
        <button v-permission="'buttonC'">Button C</button> 
   </template>