vue实现网页水印
Vue 实现网页水印的方法
使用 canvas 生成水印背景
通过 canvas 动态生成水印图案，将其作为背景图添加到目标元素或整个页面。这种方法灵活且支持自定义文本、旋转角度和透明度。
// 在 Vue 组件中定义方法
methods: {
generateWatermark(text, color = 'rgba(180, 180, 180, 0.3)', angle = -20) {
const canvas = document.createElement('canvas')
canvas.width = 200
canvas.height = 150
const ctx = canvas.getContext('2d')
ctx.font = '16px Arial'
ctx.fillStyle = color
ctx.rotate(angle * Math.PI / 180)
ctx.fillText(text, 10, 80)
return canvas.toDataURL('image/png')
}
}全局指令实现水印
创建 Vue 指令可复用水印功能，通过指令参数传递配置项。
// 注册全局指令
Vue.directive('watermark', {
inserted(el, binding) {
const { text, color, angle } = binding.value || {}
const url = this.generateWatermark(text || '保密资料', color, angle)
el.style.backgroundImage = `url(${url})`
el.style.backgroundRepeat = 'repeat'
},
methods: {
generateWatermark() { /* 同前文方法 */ }
}
})
// 使用方式
<div v-watermark="{ text: '内部文件', color: 'rgba(120,120,120,0.1)' }"></div>防删除水印方案
为防止用户通过开发者工具删除水印，可采用 MutationObserver 监控 DOM 变化。
// 在 mounted 钩子中实现
mounted() {
const watermark = document.createElement('div')
watermark.className = 'global-watermark'
// 设置水印样式...
document.body.appendChild(watermark)
const observer = new MutationObserver(() => {
if (!document.querySelector('.global-watermark')) {
document.body.appendChild(watermark)
}
})
observer.observe(document.body, { childList: true })
}动态水印方案
对于需要显示用户信息的水印，可结合 Vue 响应式数据实现动态更新。
data() {
return {
watermarkText: `用户ID: ${userID}`,
watermarkConfig: {
color: 'rgba(100,100,100,0.2)',
angle: -15
}
}
},
watch: {
watermarkText(newVal) {
this.updateWatermark(newVal)
}
}CSS-only 简易方案
对于简单场景，可用纯 CSS 实现基础水印效果。
<div class="watermarked-container">
<div class="watermark">样本水印</div>
<!-- 页面内容 -->
</div>
<style>
.watermarked-container {
position: relative;
}
.watermark {
position: absolute;
pointer-events: none;
opacity: 0.2;
transform: rotate(-15deg);
z-index: 9999;
}
</style>每种方案适用于不同场景，canvas 方案适合需要精细控制的场景，指令方式便于复用，MutationObserver 方案提供防删除保护，CSS 方案实现最简单。可根据实际需求选择或组合使用。
