自定义指令（Directive）

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

官方文档传送门：自定义指令

指令钩子

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

钩子参数

指令的钩子会传递以下几种参数：

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 钩子中可用。

简化形式

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

对象字面量

如果你的指令需要多个值，你可以向它传递一个 JavaScript 对象字面量。别忘了，指令也可以接收任何合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

水印自定义指令

使用指令的简化形式来实现。

import type { Directive, DirectiveBinding } from "vue";
/**
 * 添加水印指令
 */
export const vWatermark: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
  const elWidth = el.clientWidth, elHeight = el.clientHeight
  el.style.position = 'relative'
  const span = document.createElement('span')
  span.className = 'watermark-item'
  // 设置水印的样式，参数可以从binding中获取，对于一些没有传递的值可以设置默认值
  span.style.fontSize = '12px'
  span.style.display = 'inline-block'
  span.style.textAlign = 'center'
  span.style.color = binding.value.color
  span.style.height = binding.value.height + 'px'
  span.style.lineHeight = binding.value.height + 'px'
  span.style.width = binding.value.width + 'px'
  span.style.position = 'absolute'
  span.style.userSelect = 'none'
  span.style.transform = 'rotate(-30deg)'
  span.style.zIndex = '10'
  span.style.pointerEvents = 'none' // 让水印不遮挡页面的事件
  // 根据绑定容器的宽高设置水印
  for (let y = 0; y < elHeight; y += binding.value.height) {
    for (let x = 0; x < elWidth; x += binding.value.width) {
      const cloneSpan = span.cloneNode() as HTMLSpanElement
      cloneSpan.style.top = `${y}px`
      cloneSpan.style.left = `${x}px`
      cloneSpan.innerHTML = binding.value.text
      el.appendChild(cloneSpan)
    }
  }
}

全局注册

// main.ts
import { vWatermark } from './directive/index'

// 定义全局自定义指令
app.directive('watermark', vWatermark)

单个组件引入

// 直接引入使用即可
import { vWatermark } from '@/directive/index'

使用

<div class="box" v-watermark="watermarkConfig">

// 定义水印配置
const watermarkConfig = reactive({
  text: 'lucky 1234',
  color: 'rgba(0, 0, 0, 0.3)',
  width: 140,
  height: 80
})

实现效果

vue3自定义指令（添加水印）