一、引言

在前端开发中，为了保护页面内容的版权或者防止信息泄露，常常需要在页面上添加水印。Vue 3 提供了自定义指令的功能，允许开发者封装自己的指令来扩展 Vue 的功能。通过封装一个水印自定义指令，我们可以方便地在多个组件中复用水印功能。本文将详细介绍如何在 Vue 3 中封装一个水印自定义指令。

二、水印原理

水印的实现原理是创建一个包含水印文本的透明层，然后将其覆盖在需要添加水印的元素上。可以通过 CSS 的 transform 属性对水印进行旋转，使用 opacity 属性设置透明度，从而达到水印的效果。

三、封装水印自定义指令

3.1 创建自定义指令文件

在项目中创建一个 directives 目录，并在其中创建一个 watermark.js 文件，用于封装水印自定义指令。

// directives/watermark.js
import { Directive } from 'vue';

const watermark: Directive = {
  mounted(el, binding) {
    const { text, font, color, fontSize, rotate, opacity } = binding.value;

    // 创建水印画布
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;

    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.font = `${fontSize}px ${font}`;
      ctx.fillStyle = color;
      ctx.globalAlpha = opacity;
      ctx.rotate((-rotate * Math.PI) / 180);
      ctx.fillText(text, canvas.width / 10, canvas.height / 2);
    }

    // 将画布内容转换为 base64 编码的图片
    const base64Url = canvas.toDataURL();

    // 创建水印样式
    const watermarkStyle = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('${base64Url}');
      background-repeat: repeat;
      pointer-events: none;
    `;

    // 创建水印元素
    const watermarkElement = document.createElement('div');
    watermarkElement.style.cssText = watermarkStyle;

    // 设置元素的定位为相对定位，以便水印元素可以相对于它定位
    el.style.position = 'relative';

    // 将水印元素添加到目标元素中
    el.appendChild(watermarkElement);
  },
  updated(el, binding) {
    // 当指令绑定的值更新时，重新生成水印
    const watermarkElement = el.querySelector('div');
    if (watermarkElement) {
      el.removeChild(watermarkElement);
    }

    const { text, font, color, fontSize, rotate, opacity } = binding.value;

    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;

    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.font = `${fontSize}px ${font}`;
      ctx.fillStyle = color;
      ctx.globalAlpha = opacity;
      ctx.rotate((-rotate * Math.PI) / 180);
      ctx.fillText(text, canvas.width / 10, canvas.height / 2);
    }

    const base64Url = canvas.toDataURL();

    const watermarkStyle = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('${base64Url}');
      background-repeat: repeat;
      pointer-events: none;
    `;

    const newWatermarkElement = document.createElement('div');
    newWatermarkElement.style.cssText = watermarkStyle;

    el.style.position = 'relative';
    el.appendChild(newWatermarkElement);
  },
};

export default watermark;

3.2 在项目中注册自定义指令

在 main.js 中引入并注册水印自定义指令：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import watermark from './directives/watermark';

const app = createApp(App);
app.directive('watermark', watermark);
app.mount('#app');

四、在组件中使用水印自定义指令

<template>
  <div v-watermark="watermarkOptions">
    <!-- 这里是需要添加水印的内容 -->
    <p>这是一段需要添加水印的文本。</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const watermarkOptions = ref({
  text: '版权所有',
  font: 'Arial',
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: 16,
  rotate: 30,
  opacity: 0.2
});
</script>

五、代码解释

3.1 mounted 钩子

当指令绑定的元素被插入到 DOM 中时，mounted 钩子会被调用。在这个钩子中，我们创建了一个画布，在画布上绘制水印文本，然后将画布内容转换为 base64 编码的图片。接着，我们创建了一个包含水印图片的 div 元素，并将其添加到目标元素中。

3.2 updated 钩子

当指令绑定的值更新时，updated 钩子会被调用。在这个钩子中，我们先移除之前的水印元素，然后重新生成水印并添加到目标元素中。

3.3 组件中使用

在组件中，我们通过 v-watermark 指令绑定一个包含水印配置选项的对象。这些选项包括水印文本、字体、颜色、字号、旋转角度和透明度等。

结语

通过封装一个水印自定义指令，我们可以在 Vue 3 项目中方便地为多个元素添加水印。自定义指令的封装使得代码具有更好的复用性和可维护性。开发者可以根据需要调整水印的样式和配置选项，以满足不同的需求。

如果你觉得这篇文章对你理解如何在 Vue 3 中封装水印自定义指令有所帮助，别忘了点赞和关注我！点赞是对我的鼓励，关注我可以获取更多前端开发的实用技巧和经验分享。同时，我非常期待与你交流，你在封装自定义指令时遇到过哪些问题？或者你有什么独特的使用经验？欢迎在评论区留言，让我们一起在前端开发的道路上共同进步！