vue实现列表水印

实现列表水印的方法

使用CSS背景图

通过CSS的background-image属性为列表容器添加水印背景。水印可以是文字或图片，通过调整透明度实现半透明效果。

<template>
  <div class="watermarked-list">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

<style>
.watermarked-list {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" opacity="0.1"><text x="50%" y="50%" font-size="20" text-anchor="middle" dominant-baseline="middle" transform="rotate(-45, 100, 100)">WATERMARK</text></svg>');
  background-repeat: repeat;
}
</style>

使用Canvas动态生成水印

通过Canvas绘制水印文字，将Canvas转为图片后设置为列表背景。这种方式可以动态调整水印内容和样式。

export default {
  methods: {
    generateWatermark(text) {
      const canvas = document.createElement('canvas');
      canvas.width = 200;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.font = '20px Arial';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.translate(100, 100);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(text, 0, 0);
      return canvas.toDataURL('image/png');
    }
  },
  mounted() {
    const watermark = this.generateWatermark('CONFIDENTIAL');
    document.querySelector('.watermarked-list').style.backgroundImage = `url(${watermark})`;
  }
}

使用伪元素叠加

通过CSS伪元素在列表容器上叠加水印内容，这种方式不需要修改DOM结构。

.watermarked-list {
  position: relative;
}
.watermarked-list::after {
  content: "WATERMARK";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  transform: rotate(-45deg);
}

使用第三方库

对于复杂的水印需求，可以使用专门的水印库如vue-watermark。安装后简单配置即可使用。

import VueWatermark from 'vue-watermark'

Vue.use(VueWatermark, {
  text: 'SECRET',
  opacity: 0.2,
  width: 200,
  height: 200,
  rotate: -45
})

<template>
  <div v-watermark>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>

每种方法各有优缺点，CSS背景图最简单但不够灵活，Canvas可以动态生成但稍复杂，伪元素不需要额外DOM节点，第三方库功能最全面但增加依赖。根据具体需求选择合适方案。