Vue3自定义指令

自定义指令的定义:

自定义指令是用来操作DOM的，尽管vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展，不仅仅可用于定义任何DOM操作，并且是可以复用的。

1.在项目中新建自定义指令地址

• SRC=> directives 文件夹

• directives => index.ts 管理文件

• directives => "自定义指令名".ts 分了类的自定义指令模块

2.在管理文件进行注册

src => directives => index.ts

import { App } from "vue"
import { regPermission } from "./permission"

• 导入相对应的依赖与自定义指令函数文件

export const regAllDirective = (app: App<Element>) => {
    regPermission(app)
    ///....添加更多自定义指令函数
}

• 所有的自定义指令的管理都在 index页面 当中

• index页面 导出一个 自定义指令的集合,当需要使用自定义指令的时候,就只需要 regAllDirective 下属的指令即可

3.在 main.ts中进行引入

• 引入自定义指令函数

import { regAllDirective } from './directives'

• 初始化自定义指令

const app = createApp(App)
regAllDirective(app)
app.mount('#app')

4.编写自定义指令文件

• directives => "自定义指令名".ts

• 引入需要使用到的模块

import { useUserStore } from "@/store/user"
import { App } from "vue"

• 编写自定义指令

export const regPermission = (app: App<Element>) => {
    app.directive("permission", {
        mounted(el, binding) {
            const userStore = useUserStore()
​
            //从仓库数据中判断是否存在binding.value 如果不存在,就证明没有权限,就先删除dom元素
            if (!userStore.getPermitions.includes(binding.value)) {
                el.remove()
            }
        },
    })}

1. el：指令绑定到的元素。这可以用于直接操作 DOM。(例如:触发事件的按钮 盒子 等)

2. binding：一个对象，虚拟的,用来通过 .value 来接收传进来的值 自定义组件传递的值 (看下方)

• 语法

export const 自定义函数名称 = (app: App<Element>) => {
    app.directive("自定义指令名称", {
        //钩子函数
        mounted(el, binding) {
          
 }})}

5.组件中进行使用

list.vue

<el-button  @click="addFn" v-permission="'addUser'">添加</el-button>

语法:

<el-button  @click="addFn" v-自定义组件名="需要传递的值,用binding.value接收">添加</el-button>

• 需要传递的值,如果希望传递字符串,需要在字符串上再加多一个引号 ""

• 本文结合的实例即为 判断按钮是否存在权限,进行控制显示隐藏