vue怎么实现页面水印

实现页面水印的方法

在Vue中实现页面水印可以通过以下几种方式完成，根据需求选择合适的方法。

使用Canvas生成水印

通过Canvas绘制水印文本或图片，并将其作为背景插入到页面中。

// 在Vue组件中
methods: {
  generateWatermark(text) {
    const canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 100;
    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, 50);
    return canvas.toDataURL('image/png');
  }
},
mounted() {
  const watermark = this.generateWatermark('Confidential');
  document.body.style.backgroundImage = `url(${watermark})`;
  document.body.style.backgroundRepeat = 'repeat';
}

使用CSS伪元素

通过CSS的伪元素在页面上叠加水印内容。

.watermark {
  position: relative;
}
.watermark::after {
  content: "Confidential";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
  color: rgba(200, 200, 200, 0.3);
  font-size: 16px;
  transform: rotate(-15deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

使用第三方库

可以使用现成的Vue水印插件如vue-watermark简化实现。

安装插件：

npm install vue-watermark

在Vue中使用：

import VueWatermark from 'vue-watermark';

Vue.use(VueWatermark, {
  text: 'Confidential',
  opacity: 0.3,
  fontSize: 16,
  angle: -15
});

动态更新水印

需要动态更新水印内容时，可以结合Vue的响应式特性。

data() {
  return {
    watermarkText: 'Confidential'
  };
},
watch: {
  watermarkText(newVal) {
    const watermark = this.generateWatermark(newVal);
    document.body.style.backgroundImage = `url(${watermark})`;
  }
}

防止水印被删除

为防止用户通过开发者工具删除水印，可以监听DOM变化或定期检查水印是否存在。

setInterval(() => {
  if (!document.querySelector('.watermark')) {
    this.addWatermark();
  }
}, 1000);

选择合适的方法取决于具体需求，Canvas方法适合复杂水印，CSS方法更轻量，第三方库则提供开箱即用的解决方案。