当前位置：首页 > VUE

vue 水印实现

2026-01-14 00:05:07VUE

Vue 水印实现方法

使用 Canvas 绘制水印

在 Vue 中可以通过 Canvas 动态生成水印，并将其作为背景或覆盖层添加到页面中。

<template>
  <div class="watermark-container">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.createWatermark('Watermark Text', 30, -20, 'rgba(200, 200, 200, 0.2)');
  },
  methods: {
    createWatermark(text, fontSize, angle, color) {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 100;
      const ctx = canvas.getContext('2d');

      ctx.font = `${fontSize}px Arial`;
      ctx.fillStyle = color;
      ctx.rotate(angle * Math.PI / 180);
      ctx.fillText(text, 10, 50);

      const watermarkDiv = document.createElement('div');
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = '0';
      watermarkDiv.style.left = '0';
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.pointerEvents = 'none';
      watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL()})`;
      watermarkDiv.style.zIndex = '9999';

      document.body.appendChild(watermarkDiv);
    }
  }
}
</script>

使用 CSS 重复背景

对于简单的水印效果，可以直接使用 CSS 背景重复实现。

<template>
  <div class="watermarked-content" :style="watermarkStyle">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      watermarkStyle: {
        backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'100\'><text x=\'10\' y=\'50\' font-family=\'Arial\' font-size=\'20\' fill=\'rgba(200,200,200,0.2)\' transform=\'rotate(-20)\'>Watermark</text></svg>")',
        backgroundRepeat: 'repeat'
      }
    }
  }
}
</script>

使用第三方库

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

安装：

npm install vue-watermark --save

使用：

<template>
  <watermark :text="watermarkText" :opacity="0.3" :font-size="16">
    <!-- 需要加水印的内容 -->
  </watermark>
</template>

<script>
import Watermark from 'vue-watermark';

export default {
  components: {
    Watermark
  },
  data() {
    return {
      watermarkText: 'Confidential'
    }
  }
}
</script>

防止水印被删除

为防止用户通过开发者工具删除水印，可以添加 MutationObserver 监听 DOM 变化。

methods: {
  protectWatermark() {
    const targetNode = document.body;
    const config = { childList: true, subtree: true };

    const callback = function(mutationsList) {
      for(const mutation of mutationsList) {
        if(mutation.removedNodes.length > 0) {
          const watermark = document.querySelector('.watermark');
          if(!watermark) {
            this.createWatermark();
          }
        }
      }
    };

    const observer = new MutationObserver(callback.bind(this));
    observer.observe(targetNode, config);
  }
}

响应式水印调整

确保水印在不同屏幕尺寸下都能正常显示。

methods: {
  adjustWatermark() {
    window.addEventListener('resize', () => {
      const watermark = document.querySelector('.watermark');
      if(watermark) {
        document.body.removeChild(watermark);
        this.createWatermark();
      }
    });
  }
}

以上方法可以根据具体需求选择或组合使用，实现不同复杂度的水印效果。

vue 水印实现