首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3自定义指令directive

Vue3如何自定义指令directive(如权限控制)

2024-12-26 14:48:52 作者：张小伟i

本文详细介绍了如何在Vue3项目中创建自定义指令directive1,首先,在src/directives/index.ts文件中引入自定义指令,然后,创建src/directives/permission.ts文件来定义具体指令逻辑,在main.ts文件中引入并注册该指令,最后,在页面中使用自定义指令

Vue3自定义指令directive

1.创建src/directives/index.ts文件

//@ts-nocheck
import { Directive } from "vue";
import { permission } from "@/directives/permission.ts";

const allGlobalDirectives = { permission };
// console.log(allGlobalDirectives, "allGlobalDirectives"); //打印发现是导出的自定义指令名，permission
export default {
  install(app) {
    Object.keys(allGlobalDirectives).forEach(key => {  //Object.keys() 返回一个数组，值是所有可遍历属性的key名
      app.directive(key, (allGlobalDirectives as { [key: string]: Directive })[key]);  //key是自定义指令名字；后面应该是自定义指令的值，值类型是string
    });
  }
};

2.创建src/directives/permission.ts文件

import type { DirectiveBinding } from 'vue'

export const permission = (el: HTMLElement, binding: DirectiveBinding) => {
  // value 获取用户使用自定义指令绑定的内容
  const {value} = binding;
  // 获取用户所有的权限按钮
  // const permissionBtn = sessionStorage.getItem("permission");
  const permissionBtn = ["user.add23"];
  // 判断用户使用自定义指令，是否使用正确了
  if (value && value instanceof Array && value.length > 0) {
    const permissionFunc = value;
    //判断传递进来的按钮权限，用户是否拥有
    //Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
    const hasPermission = permissionBtn.some((role: any) => {
      return permissionFunc.includes(role);
    });
    console.log("hasPermission", value, hasPermission);
    // 当用户没有这个按钮权限时，设置隐藏这个按钮
    if (!hasPermission) {
      el.style.display = "none";
    }
  } else {
    throw new Error("need roles! Like v-permission=\"['admin','editor']\"");
  }
};

3.main.ts引入

// 引入自定义插件对象：注册全局组件
import globalDirectives from "@/directives/index.ts";

const app = createApp(App);


// 安装自定义指令
app.use(globalDirectives);
app.mount("#app");

4.页面中使用

<span v-permission="['user.add']" class="padding-right-20">测试</span>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。