当前位置：首页 > VUE

vue实现列表水印

2026-01-11 22:16:57VUE

实现列表水印的方法

在Vue中为列表添加水印可以通过多种方式实现，以下是几种常见的方法：

使用CSS背景图

通过CSS的background-image属性为列表元素添加水印背景。水印可以是文字或图片。

<template>
  <div class="watermarked-list">
    <div v-for="item in list" :key="item.id" class="list-item">
      {{ item.text }}
    </div>
  </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"><text x="50%" y="50%" font-size="20" fill="rgba(0,0,0,0.1)" text-anchor="middle" dominant-baseline="middle" transform="rotate(-45, 100, 100)">WATERMARK</text></svg>');
  background-repeat: repeat;
}
.list-item {
  padding: 10px;
  background-color: white;
  margin: 5px;
}
</style>

使用Canvas生成水印

动态生成水印图像并设置为背景。

<template>
  <div ref="watermarkContainer" class="watermark-container">
    <div v-for="item in list" :key="item.id" class="list-item">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.generateWatermark();
  },
  methods: {
    generateWatermark() {
      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('WATERMARK', 0, 0);

      const url = canvas.toDataURL('image/png');
      this.$refs.watermarkContainer.style.backgroundImage = `url(${url})`;
    }
  }
}
</script>

<style>
.watermark-container {
  background-repeat: repeat;
}
.list-item {
  padding: 10px;
  background-color: white;
  margin: 5px;
}
</style>

使用伪元素添加水印

通过CSS伪元素在每个列表项上添加水印。

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

<style>
.watermarked-item {
  position: relative;
  padding: 10px;
  margin: 5px;
  background-color: white;
}
.watermarked-item::after {
  content: "WATERMARK";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.1);
  transform: rotate(-45deg);
  pointer-events: none;
  z-index: 1;
}
</style>

使用自定义指令

创建Vue自定义指令来动态添加水印。

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

<script>
export default {
  directives: {
    watermark: {
      inserted(el) {
        const watermark = document.createElement('div');
        watermark.style.position = 'absolute';
        watermark.style.top = '0';
        watermark.style.left = '0';
        watermark.style.right = '0';
        watermark.style.bottom = '0';
        watermark.style.display = 'flex';
        watermark.style.alignItems = 'center';
        watermark.style.justifyContent = 'center';
        watermark.style.fontSize = '20px';
        watermark.style.color = 'rgba(0, 0, 0, 0.1)';
        watermark.style.transform = 'rotate(-45deg)';
        watermark.style.pointerEvents = 'none';
        watermark.style.zIndex = '1';
        watermark.textContent = 'WATERMARK';

        el.style.position = 'relative';
        el.appendChild(watermark);
      }
    }
  }
}
</script>

每种方法都有其适用场景，CSS背景图方法最简单但灵活性较低，Canvas方法可以生成更复杂的水印，伪元素方法适合单个元素的水印，自定义指令则提供了最大的灵活性和复用性。

vue实现列表水印