亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3如何自定義指令directive(如權(quán)限控制)

 更新時間：2024年12月26日 14:48:51   作者：張小偉i  
本文詳細介紹了如何在Vue3項目中創(chuàng)建自定義指令directive1,首先,在src/directives/index.ts文件中引入自定義指令,然后,創(chuàng)建src/directives/permission.ts文件來定義具體指令邏輯,在main.ts文件中引入并注冊該指令,最后,在頁面中使用自定義指令

Vue3自定義指令directive

1.創(chuàng)建src/directives/index.ts文件

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

const allGlobalDirectives = { permission };
// console.log(allGlobalDirectives, "allGlobalDirectives"); //打印發(fā)現(xiàn)是導出的自定義指令名，permission
export default {
  install(app) {
    Object.keys(allGlobalDirectives).forEach(key => {  //Object.keys() 返回一個數(shù)組，值是所有可遍歷屬性的key名
      app.directive(key, (allGlobalDirectives as { [key: string]: Directive })[key]);  //key是自定義指令名字；后面應(yīng)該是自定義指令的值，值類型是string
    });
  }
};

2.創(chuàng)建src/directives/permission.ts文件

import type { DirectiveBinding } from 'vue'

export const permission = (el: HTMLElement, binding: DirectiveBinding) => {
  // value 獲取用戶使用自定義指令綁定的內(nèi)容
  const {value} = binding;
  // 獲取用戶所有的權(quán)限按鈕
  // const permissionBtn = sessionStorage.getItem("permission");
  const permissionBtn = ["user.add23"];
  // 判斷用戶使用自定義指令，是否使用正確了
  if (value && value instanceof Array && value.length > 0) {
    const permissionFunc = value;
    //判斷傳遞進來的按鈕權(quán)限，用戶是否擁有
    //Array.some(), 數(shù)組中有一個結(jié)果是true返回true，剩下的元素不會再檢測
    const hasPermission = permissionBtn.some((role: any) => {
      return permissionFunc.includes(role);
    });
    console.log("hasPermission", value, hasPermission);
    // 當用戶沒有這個按鈕權(quán)限時，設(shè)置隱藏這個按鈕
    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>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論