vue3自定义指令（按钮权限实现）什么是自定义指令 Vue除了内置的一系列指令 (比如 v-model 、v-show

什么是自定义指令

Vue除了内置的一系列指令 (比如 v-model 、v-show 、v-if) 等等之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

自定义指令的作用

虽然Vue已经提供了很多内置指令供我们使用，但有些时候并不能很好的满足项目需要。所以官方允许我们自定义指令，自定义指令就比较灵活了，我们可以使用任何名称来命名自定义指令，不过我们自定义指定还是需要以v-开头，比如v-focus、v-resize等等。
如：项目中按钮权限、防抖、节流、点击复制、长按识别、dom拖拽、input 元素自动聚焦这些都可以用自定义指令去完成，但让也可以封装方法，但我感觉还是写成自定义指令比较方便

全局注册

注：全局注册的指令可在项目的任何地方使用

在main.js中

import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.directive("focus", {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() {},
  // 绑定元素的父组件更新前调用
  beforeUpdate() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount() {},
  // 绑定元素的父组件卸载后调用
  unmounted() {},
});
app.mount("#app");

上段代码中我们借助Vue3提供的directive方法注册了一个全局的自定义指令，该方法接收两个参数：指令名称、指令钩子函数对象。

钩子函数对象和组件的生命周期一样，这也和Vue2中的自定义指令有着较大的区别。理解这些钩子函数也很简单：我们都知道自定义指令是作用在DOM元素上，那么自定义指令从绑定到DOM元素，再到DOM元素发生变化等等一系列操作，都对应了不同的钩子函数，比如当DOM元素插入到文档中时，自定义指令的mounted等钩子函数就会执行。

调用全局注册的自定义指令，代码如下：

<input type="text" v-focus>

我们可以在任意组件中调用它

局部注册

`<script setup>`中注册：

<script setup lang="ts">
// 在模板中启用 v-focus
const vFocus = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {},
  // 在元素被插入到 DOM 前调用
  beforeMount() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() {},
  // 绑定元素的父组件更新前调用
  beforeUpdate() {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount() {},
  // 绑定元素的父组件卸载后调用
  unmounted() {},
};
</script>

`<script>`中使用：

export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      // 在绑定元素的 attribute 前
	  // 或事件监听器应用前调用
	  created(el, binding, vnode, prevVnode) {},
	  // 在元素被插入到 DOM 前调用
	  beforeMount() {},
	  // 在绑定元素的父组件
	  // 及他自己的所有子节点都挂载完成后调用
	  mounted() {},
	  // 绑定元素的父组件更新前调用
	  beforeUpdate() {},
	  // 在绑定元素的父组件
	  // 及他自己的所有子节点都更新后调用
	  updated() {},
	  // 绑定元素的父组件卸载前调用
	  beforeUnmount() {},
	  // 绑定元素的父组件卸载后调用
	  unmounted() {},
    }
  }
}

参数详解

按钮权限（自定义指令传值）

可以通过binding.value获取自定义指令传过来的参数，如果是字符串则应该在组件使用时参照这种格式：v-permission1 = "'DELETE'" 双引号里面加单引号

app.vue文件夹

 <h3>该用户当前拥有的权限</h3>
        <div v-permission1 = "'DELETE'">删除</div>
        <div v-permission1 = "'ADD'">添加</div>
        <div v-permission1 = "'UPDATE'">修改</div>

main.js文件夹

 // //获取按钮权限
 const points = ['DELETE','ADD']
//全局自定义指令
app.directive('permission1',{
    mounted(el,binding){
        console.log(binding);
            //includes: 判断用户指令传入的数据内容是否在points数组存在，存在返回true
            if(!points.includes(binding.value)){
                //取反就是不存在的情况
                //删除对应的DOM节点
                el.remove()
                console.log('删除了');
            }
   }
})

从上面的代码看出，points保存了从后台接口获取到权限列表为DELETE删除，ADD添加权限，所以在页面只会显示以下权限

vue3自定义指令（按钮权限实现）