当前位置：首页 > VUE

vue实现列表水印

2026-03-26 19:35:46VUE

实现列表水印的方法

在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" opacity="0.1"><text x="10" y="20" transform="rotate(-45 100,100)">Watermark</text></svg>');
  background-repeat: repeat;
}
.list-item {
  padding: 10px;
}
</style>

使用Canvas动态生成水印

vue实现列表水印

通过Canvas动态生成水印图像，然后设置为背景。

// 在Vue组件的方法中
methods: {
  generateWatermark() {
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 200
    const ctx = canvas.getContext('2d')
    ctx.font = '16px Arial'
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
    ctx.rotate(-45 * Math.PI / 180)
    ctx.fillText('Watermark', 50, 150)
    return canvas.toDataURL('image/png')
  }
},
mounted() {
  this.watermark = this.generateWatermark()
}

使用第三方库

vue实现列表水印

可以使用专门的水印库如vue-watermark简化实现。

npm install vue-watermark

import VueWatermark from 'vue-watermark'

Vue.use(VueWatermark)

// 在模板中使用
<template>
  <watermark :text="'Watermark'" :opacity="0.1">
    <div v-for="item in list" :key="item.id">
      {{ item.text }}
    </div>
  </watermark>
</template>