vue 水印 实现

Vue 水印实现方法

使用 CSS 背景图实现

在 Vue 中可以通过 CSS 的 background-image 属性添加水印。创建一个包含水印文本的 Canvas 元素，将其转换为 Data URL 后设置为背景。

// 在 Vue 组件中
methods: {
  generateWatermark(text) {
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;
    const ctx = canvas.getContext('2d');
    ctx.font = '16px Arial';
    ctx.fillStyle = 'rgba(200, 200, 200, 0.3)';
    ctx.rotate(-0.2);
    ctx.fillText(text, 10, 80);
    return canvas.toDataURL('image/png');
  }
},
mounted() {
  const watermark = this.generateWatermark('Confidential');
  document.body.style.backgroundImage = `url(${watermark})`;
  document.body.style.backgroundRepeat = 'repeat';
}

使用自定义指令实现

创建一个 Vue 自定义指令可以更灵活地控制水印的添加和移除。

// main.js 或单独的文件
Vue.directive('watermark', {
  inserted(el, binding) {
    const { text, color, fontSize } = binding.value || {};
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 150;
    const ctx = canvas.getContext('2d');
    ctx.font = `${fontSize || '16px'} Arial`;
    ctx.fillStyle = color || 'rgba(200, 200, 200, 0.3)';
    ctx.rotate(-0.2);
    ctx.fillText(text || 'Watermark', 10, 80);

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

// 在组件中使用
<template>
  <div v-watermark="{ text: 'Sample', color: 'rgba(0,0,0,0.1)', fontSize: '20px' }">
    <!-- 内容 -->
  </div>
</template>

使用第三方库

对于更复杂的水印需求，可以考虑使用专门的水印库如 vue-watermark。

安装：

npm install vue-watermark

使用：

import VueWatermark from 'vue-watermark';

Vue.use(VueWatermark);

// 在组件中
<template>
  <vue-watermark
    :text="watermarkText"
    :font-size="16"
    :color="'rgba(0,0,0,0.1)'"
    :width="200"
    :height="150"
  >
    <!-- 内容 -->
  </vue-watermark>
</template>

防止水印被移除

为了防止用户通过开发者工具移除水印，可以结合 MutationObserver 监听 DOM 变化并重新添加水印。

mounted() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      if (!document.body.getAttribute('data-watermark')) {
        this.addWatermark();
      }
    });
  });

  observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: true
  });

  this.addWatermark();
},
methods: {
  addWatermark() {
    const watermark = this.generateWatermark('Protected');
    document.body.style.backgroundImage = `url(${watermark})`;
    document.body.setAttribute('data-watermark', 'true');
  }
}

这些方法提供了从简单到高级的不同水印实现方案，可以根据具体需求选择合适的实现方式。