Vue3 指令实现水印背景的方法

在 Web 开发中，为页面添加水印背景是一种常见需求，Vue3 提供了强大的指令系统，利用它可以轻松实现这一功能。

需要创建一个自定义指令。在 Vue3 中，自定义指令通过 app.directive 方法来创建。例如，在 main.js 中：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('watermark', {
  mounted(el, binding) {
    const { text = '默认水印文字' } = binding.value;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = 200;
    canvas.height = 150;
    ctx.rotate(-20 * (Math.PI / 180));
    ctx.font = '16px Arial';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, canvas.width / 2, canvas.height / 2);

    const dataURL = canvas.toDataURL('image/png');
    el.style.backgroundImage = `url('${dataURL}')`;
    el.style.backgroundRepeat = 'repeat';
  }
});

app.mount('#app');

上述代码定义了一个名为 watermark 的自定义指令。在 mounted 钩子函数中，我们创建了一个 canvas 元素，设置其宽度和高度，并在 canvas 上绘制水印文字。然后，将 canvas 转换为 DataURL 格式，作为背景图片应用到指令所绑定的元素上，并设置背景重复属性。

在组件中使用该指令也非常简单。例如，在一个 HelloWorld.vue 组件中：

<template>
  <div v-watermark="{ text: '版权所有' }">
    <!-- 页面内容 -->
  </div>
</template>

<script setup>
// 无需额外逻辑
</script>

<style scoped>
div {
  height: 100vh;
  width: 100vw;
}
</style>

这里在 div 元素上使用了 v-watermark 指令，并通过一个对象传递了水印文字。

通过这种方式，利用 Vue3 的自定义指令，开发者可以灵活地为不同的元素添加个性化的水印背景。不仅可以设置水印文字，还能进一步优化绘制逻辑，如调整文字样式、颜色、旋转角度等，以满足各种业务场景下的水印需求，提升页面的安全性和专业性。