vue watermark 添加水印（防盗）

在Vue项目中添加水印可以通过自定义指令来实现。以下是一个简单的例子，演示如何创建一个水印指令：

1. 创建一个自定义指令 v-watermark。
2. 在指令的 bind 钩子中，添加水印的逻辑。
3. 在组件的 mounted 钩子中调用 this.$nextTick 来确保DOM已经更新完成，并且应用水印。

// watermark.js
export default {
  bind(el, binding) {
    const watermarkContent = binding.value || '禁止复制'; // 水印内容
    const watermarkFont = '20px Microsoft YaHei'; // 水印字体
    const watermarkColor = 'rgba(0, 0, 0, 0.1)'; // 水印颜色
    const parentNode = el;
    const parentWidth = parentNode.offsetWidth;
    const parentHeight = parentNode.offsetHeight;
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
 
    canvas.width = parentWidth;
    canvas.height = parentHeight;
    ctx.font = watermarkFont;
    ctx.fillStyle = watermarkColor;
    ctx.moveTo(parentWidth * 0.5, parentHeight * 0.5);
    ctx.rotate(-Math.atan(parentHeight / parentWidth));
    ctx.fillText(watermarkContent, -ctx.measureText(watermarkContent).width / 2, 0);
 
    const base64 = canvas.toDataURL('image/png');
    const watermarkDiv = document.createElement('div');
    watermarkDiv.style.pointerEvents = 'none';
    watermarkDiv.style.position = 'absolute';
    watermarkDiv.style.top = '0px';
    watermarkDiv.style.left = '0px';
    watermarkDiv.style.width = parentWidth + 'px';
    watermarkDiv.style.height = parentHeight + 'px';
    watermarkDiv.style.backgroundImage = 'url(' + base64 + ')';
    watermarkDiv.style.backgroundSize = '100% 100%';
    watermarkDiv.style.zIndex = '10000';
    watermarkDiv.style.opacity = '0.5';
 
    parentNode.style.position = 'relative';
    parentNode.appendChild(watermarkDiv);
  }
};

4. 在Vue组件中注册并使用这个指令：

// 在main.js或相应的组件文件中
import Vue from 'vue';
import WatermarkDirective from './watermark'; // 指令文件路径
 
Vue.directive('watermark', WatermarkDirective);
 
// 在组件中使用
<template>
  <div v-watermark="'禁止复制'">
    <!-- 内容 -->
  </div>
</template>

这样就可以在Vue组件的指定元素上添加水印了。你可以根据需要调整水印的样式，比如字体、颜色和内容。