Vue3 はカスタムディレクティブを使用してボタンの権限を解決します

まえがき: ボタンの権限は通常、さまざまな管理システムに関係しているため、アカウントの権限を細分化する必要があります。ここで Vue3 のカスタムコマンドを使用する場合、デフォルトでアカウントにログインしており、そのアカウントの権限を「local || pinia || vuex」に保存しています。

まず Vue3 のカスタム命令の使用法について説明し、カスタム構文をグローバルに登録しましょう。

// main.js
const app = createApp(App)
app.directive("指令名",(el, binding)=>{})
app.directive("指令名",{ 各种生命周期钩子 })

カスタムコマンドを作成する場合、2 つのパラメーターを渡すことができます。1 つ目は、「premission」、「color」などのカスタムコマンド名です。

使用する場合はv-color、v-premissionです。

2番目のパラメータは正式には「命令定義オブジェクト」と呼ばれるもので、関数やオブジェクトを渡すことができます。

では、2 番目のパラメーターに関数を使用するのはどのような場合で、オブジェクトを使用するのはどのような場合でしょうか?

mounted 公式説明: カスタム命令の場合、一般的な状況は、特定の操作のみをとに実装する必要があり updated 、それ以外には他のフックは必要ありません。この場合、関数を直接使用して命令を定義できます。

mounted したがって、とを除く他のライフサイクルを操作する必要がある場合は updated 、オブジェクトを 2 番目のパラメータとして渡します。

命令の定義オブジェクトは、次のように N 種類のフック関数を提供できます。

// バインドされた要素の属性の前、またはイベントリスナーが適用される前に呼び出されます

作成されました(el、バインディング、vnode、prevVnode) {}、

// 要素が DOM に挿入される前に呼び出されます

beforeMount (el、バインディング、vnode、prevVnode) {}、

// バインドされた要素の親コンポーネントとそのすべての子ノードがマウントされた後に呼び出されます

マウントされた(el、バインディング、vnode、prevVnode) {}、

// バインドされた要素の親コンポーネントが更新される前に呼び出されます

beforeUpdate (el、バインディング、vnode、prevVnode) {}、

// バインドされた要素の親コンポーネントとそのすべての子ノードが更新された後に呼び出されます

更新済み(el、バインディング、vnode、prevVnode) {}、

// バインドされた要素の親コンポーネントがアンロードされる前に呼び出されます

beforeUnmount (el、バインディング、vnode、prevVnode) {}、

// バインドされた要素の親コンポーネントがアンロードされた後に呼び出されます

アンマウント(el、バインディング、vnode、prevVnode) {}

カスタムコマンドの使用方法がわかれば、カスタムコマンドを通じてボタンの権限を判断できます。

実際のプロジェクトには複数のカスタムコマンドが存在する可能性があることを考慮すると、それらすべてを main.js に記述するのは洗練されていないため、カスタムコマンドを具体的に登録する関数を直接カプセル化し、Vue インスタンスアプリにパラメータを使用して、必要なカスタム命令を関数に必死に登録できます。

// 文件夹directive下的index.js

import permission from './permission'
import colorfrom './color'

export default function (app) {
  app.directive('permission', permission)  // 传入定义对象
  app.directive('color', color)
}

カスタム命令内の定義オブジェクトのロジックは、上記のコードのパーミッションなど、個別に抽出およびカプセル化されます。

// 文件permission.js


// 判断按钮权限逻辑
const checkPermission = (el, binding) => {

    // 获取自定义指令传过来的数组（binding.value）
    const btnRoles = binding.value
    // 取一下本地存的账号权限
    const userRoles = JSON.parse(localStorage.getItem("role"))

    // 判断自定义指令的传值，在账号权限数组中能否找到 
    if (btnRoles && btnRoles instanceof Array) {
        if (btnRoles.length) {
            // 能找到返回true
            const hasPermission = userRoles.some(v => {
                return btnRoles.includes(v)
            })
            // 找不到返回false，使用自定义指令的钩子函数，操作dom元素删除该节点
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        }
        else {
            throw new Error(`传入关于权限的数组，如 v-permission="['super','normal']"`)
        }
    }
}

// 导出一个对象用作自定义指令的第二个参数
export default {
  mounted(el, binding) {
    checkPermission(el, binding)
  },
  updated(el, binding) {
    checkPermission(el, binding)
  }
}

コンポーネントでカスタムディレクティブを使用する

<el-button v-permission="['super']">超级管理员</el-button>

Vue3 はカスタム ディレクティブを使用してボタンの権限を解決します

おすすめ

Vue3 はカスタムディレクティブを使用してボタンの権限を解決します