在vue中封装自己的权限指令

按钮权限一直是管理系统的痛点，对于后端只是一个数据，那么对于前端在vue里在不使用v-if等做判断时该怎么去做按钮的权限控制呢？这是一个值得前端程序员深思的问题，本文借鉴了若依管理系统，做了自定义按钮权限，可供参考：

在 Vue 2 中，自定义指令的创建和使用方式与 Vue 3 类似，只是稍有不同的语法。以下是在 Vue 2 中如何创建和使用自定义指令的步骤：

创建自定义指令文件： 首先，创建一个新的 JavaScript 文件，用于存放自定义指令的逻辑。例如，你可以创建一个名为 v-custom-directive.js 的文件。
编写自定义指令逻辑： 在自定义指令文件中，编写自定义指令的逻辑。以下是一个示例，展示如何创建一个简单的自定义指令，用于改变元素的背景颜色：

js 复制代码

// v-custom-directive.js

export default {
  bind(el, binding) {
    // 指令绑定到元素时的逻辑
    // el 是绑定指令的元素
    // binding 包含指令的信息，如修饰符、参数、值等
    const color = binding.value || 'red'; // 默认为红色
    el.style.backgroundColor = color;
  },
};

在上述示例中，我们定义了一个自定义指令，它会在元素绑定时将元素的背景颜色设置为指令的值（如果提供的话），否则默认为红色。

注册自定义指令： 在你的应用中注册自定义指令，通常在 Vue 实例创建之前进行注册。你可以在应用的入口文件（如 main.js）中注册自定义指令。

js 复制代码

// main.js

import Vue from 'vue';
import customDirective from './v-custom-directive'; // 导入自定义指令

// 注册自定义指令
Vue.directive('custom-directive', customDirective);

new Vue({
  // ...
});

使用自定义指令： 现在，你可以在模板中使用自定义指令。在元素上添加 v-custom-directive 指令，并传递相应的参数或值。

js 复制代码

<template>
  <div>
    <div v-custom-directive="'blue'">这是一个自定义指令示例</div>
  </div>
</template>

在这个示例中，我们在元素上使用了 v-custom-directive 自定义指令，并将背景颜色设置为蓝色。

封装自定义指令后，你可以在整个应用中重复使用它，以实现一些自定义的 DOM 操作或行为。你还可以根据需要扩展自定义指令的功能，以满足具体的应用要求。请注意，Vue 2 中的自定义指令语法略有不同，但核心概念是相似的。

在 Vue 3 中，创建和使用自定义指令的方式略有不同于 Vue 2，因为 Vue 3 引入了 Composition API，自定义指令也经过了一些改变。以下是在 Vue 3 中如何创建和使用自定义指令的步骤：

创建自定义指令文件： 首先，创建一个新的 JavaScript 文件，用于存放自定义指令的逻辑。例如，你可以创建一个名为 v-custom-directive.js 的文件。
编写自定义指令逻辑： 在自定义指令文件中，编写自定义指令的逻辑。以下是一个示例，展示如何创建一个简单的自定义指令，用于改变元素的背景颜色：

js 复制代码

// v-custom-directive.js

export default {
  beforeMount(el, binding) {
    // 指令在元素挂载前执行的逻辑
    // el 是挂载指令的元素
    // binding 包含指令的信息，如修饰符、参数、值等
    const color = binding.value || 'red'; // 默认为红色
    el.style.backgroundColor = color;
  },
};

在上述示例中，我们使用 beforeMount 钩子定义了一个自定义指令，它会在元素挂载到 DOM 之前将元素的背景颜色设置为指令的值（如果提供的话），否则默认为红色。

注册自定义指令： 在你的应用中注册自定义指令，通常在 Vue 应用的入口文件（如 main.js）中注册。

js 复制代码

// main.js

import { createApp } from 'vue';
import customDirective from './v-custom-directive'; // 导入自定义指令

const app = createApp(/* ... */);

// 注册自定义指令
app.directive('custom-directive', customDirective);

app.mount('#app');

4.使用自定义指令：现在，你可以在模板中使用自定义指令。在元素上添加 v-custom-directive 指令，并传递相应的参数或值。

js 复制代码

<template>
  <div>
    <div v-custom-directive="'blue'">这是一个自定义指令示例</div>
  </div>
</template>

在这个示例中，我们在元素上使用了 v-custom-directive 自定义指令，并将背景颜色设置为蓝色。

总结一下，自定义指令的创建和使用在 Vue 3 中仍然是一个强大的功能，但语法和生命周期钩子略有不同。通过创建自定义指令，你可以扩展 Vue 3 组件的功能，执行各种自定义 DOM 操作和行为。请根据你的具体需求来定义自定义指令的逻辑。