当前位置：首页 > VUE

vue实现网页水印

2026-02-25 16:17:59VUE

Vue 实现网页水印的方法

在 Vue 中实现网页水印可以通过多种方式，以下是几种常见的方法：

使用 CSS 背景图

通过 CSS 的 background-image 属性可以添加水印效果。这种方法简单，适合静态水印。

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

<style>
.watermark {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" opacity="0.2"><text x="10" y="50" font-family="Arial" font-size="20" fill="gray">Watermark</text></svg>');
  background-repeat: repeat;
}
</style>

使用 Canvas 动态生成水印

Canvas 可以动态生成水印，适合需要动态调整水印内容或样式的场景。

vue实现网页水印

<template>
  <div ref="watermarkContainer">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.addWatermark();
  },
  methods: {
    addWatermark() {
      const container = this.$refs.watermarkContainer;
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 100;
      const ctx = canvas.getContext('2d');
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(128, 128, 128, 0.2)';
      ctx.fillText('Watermark', 10, 50);

      const watermarkUrl = canvas.toDataURL('image/png');
      container.style.backgroundImage = `url(${watermarkUrl})`;
      container.style.backgroundRepeat = 'repeat';
    }
  }
};
</script>

使用第三方库

如果需要更复杂的水印功能（如防删除、动态位置调整等），可以使用第三方库如 vue-watermark。

安装库：

vue实现网页水印

npm install vue-watermark

使用示例：

<template>
  <vue-watermark :text="watermarkText" :opacity="0.2" :fontSize="20">
    <!-- 页面内容 -->
  </vue-watermark>
</template>

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

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

防止水印被删除

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

mounted() {
  this.addWatermark();
  this.protectWatermark();
},
methods: {
  protectWatermark() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.removedNodes.length > 0) {
          this.addWatermark();
        }
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
}