vue3自定义指令的基本使用

官网介绍的很详细，附上链接：https://cn.vuejs.org/guide/reusability/custom-directives.html#object-literals

1、全局自定义

directives，通过**app.directive(name,(el, binding, vnode, prevVnode) => {})**api来创建，该方法接收两个参数，参数一是指令名称，在使用的时候需要在前面加上 **v-**name，第二个参数接收一个函数，函数也会接收四个参数。

指令的钩子会传递以下几种参数（vue官网的定义引用)：

el：指令绑定到的元素。这可以用于直接操作 DOM。 binding：一个对象，包含以下属性。 value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。 oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。 arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。 modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。 instance：使用该指令的组件实例。 dir：指令的定义对象。 vnode：代表绑定元素的底层 VNode。 prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

自定义指令的函数处理可以拉出来作为模块引入到main.ts/js中引入使用，示例如下(ts): 指令函数的定义(permission.ts)

import type {
          
    App } from vue
export function permissionDirective(app: App) {
          
   
  // 这个指令是在点击绑定的元素之后随机生成背景色
  app.directive(permission, (el: HTMLElement, binding, vnode) => {
          
   
    el.style.background = red
    el.addEventListener(click, () => {
          
   
      // 随机生成背景颜色
      el.style.background =
        rgba( +
        Math.random() * 255 +
        , +
        Math.random() * 255 +
        , +
        Math.random() * 255 +
        ,1)
    })
  })
}

在main.ts中引入使用：

import App from ./App.vue
import {
          
    createPinia } from pinia
import {
          
    permissionDirective } from ./directive

const app = createApp(App) // 创建vue的应用实例

permissionDirective(app) // 自定义指令的使用

app.use(createPinia()).use(router).mount(#app)

2、局部自定义

在页面的script中定义页面中使用局部调用的指令(以setup语法糖形式作为示例)

<script setup lang="ts">
// 在模板中启用v-bg
const vBg = {
  mounted: (el: HTMLElement) => el.style.backgroundColor = green
}
</script>
// 使用自定义指令
<template>
  <div v-bg>局部自定义指令</div>
</template>