vue 水印 实现
实现 Vue 水印的几种方法
使用 CSS 背景图实现水印
通过 CSS 的 background-image 和 background-repeat 属性实现水印效果，适合静态水印。
<template>
<div class="watermark-container">
<!-- 页面内容 -->
</div>
</template>
<style>
.watermark-container {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'><text x='10' y='50' fill='rgba(0,0,0,0.1)' transform='rotate(-30)' font-size='20'>Watermark</text></svg>");
background-repeat: repeat;
}
</style>使用 Canvas 动态生成水印
通过 Canvas 动态绘制水印文字，适合需要动态修改水印内容的场景。
<template>
<div ref="watermark"></div>
</template>
<script>
export default {
mounted() {
this.generateWatermark();
},
methods: {
generateWatermark() {
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
const ctx = canvas.getContext('2d');
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.rotate(-Math.PI / 6);
ctx.fillText('Watermark', 10, 50);
const watermark = this.$refs.watermark;
watermark.style.backgroundImage = `url(${canvas.toDataURL()})`;
watermark.style.backgroundRepeat = 'repeat';
}
}
}
</script>使用第三方库 vue-watermark
对于更复杂的需求，可以使用现成的 Vue 插件如 vue-watermark。
安装：
npm install vue-watermark使用：
<template>
<vue-watermark :text="watermarkText" :opacity="0.1" :width="200" :height="100" />
</template>
<script>
import VueWatermark from 'vue-watermark';
export default {
components: { VueWatermark },
data() {
return {
watermarkText: 'Confidential'
}
}
}
</script>防止水印被删除
通过 MutationObserver 监听 DOM 变化，防止水印被删除。
<script>
export default {
mounted() {
this.protectWatermark();
},
methods: {
protectWatermark() {
const observer = new MutationObserver((mutations) => {
mutations.forEach(() => {
if (!document.getElementById('watermark')) {
this.generateWatermark();
}
});
});
observer.observe(document.body, { childList: true });
}
}
}
</script>注意事项
- 水印颜色建议使用半透明效果，避免影响内容阅读
- 对于重要文档，建议结合后端生成水印图片
- 旋转角度（如-30度）可以防止简单截图盗用
- 水印密度根据实际需求调整，避免过于密集影响美观
以上方法可根据实际项目需求选择或组合使用，Canvas 方式灵活性最高，适合动态内容；CSS 方式性能最优；第三方库则提供开箱即用的解决方案。
