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

2024-02-01 23:11| 来源: 网络整理| 查看: 265

自定义指令（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 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

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

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

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'

使用

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

实现效果

【本文地址】

公司简介

联系我们