vue3中自定义指令的基本使用

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>

​

​