当前位置：首页 > VUE

vue实现列表水印

2026-02-25 16:15:16VUE

添加背景水印

在Vue中实现列表水印可以通过CSS背景图方式实现。创建一个包含水印文本的Canvas，将其转为Base64格式作为背景图。

// 水印生成工具函数
function generateWatermark(text) {
  const canvas = document.createElement('canvas')
  canvas.width = 200
  canvas.height = 150
  const ctx = canvas.getContext('2d')
  ctx.font = '16px Arial'
  ctx.fillStyle = 'rgba(200, 200, 200, 0.3)'
  ctx.rotate(-20 * Math.PI / 180)
  ctx.fillText(text, 30, 80)
  return canvas.toDataURL('image/png')
}

组件实现

在Vue组件中使用计算属性动态生成水印样式，并应用到列表容器上。

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, content: 'Item 1' },
        { id: 2, content: 'Item 2' }
      ],
      watermarkText: 'CONFIDENTIAL'
    }
  },
  computed: {
    watermarkStyle() {
      return {
        backgroundImage: `url(${generateWatermark(this.watermarkText)})`,
        backgroundRepeat: 'repeat'
      }
    }
  }
}
</script>

<style>
.list-container {
  padding: 20px;
  min-height: 500px;
}
.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

DOM水印覆盖方案

对于需要防止删除的水印，可以使用绝对定位的DOM元素覆盖整个列表区域。

<template>
  <div class="list-wrapper">
    <div class="list-container">
      <!-- 列表内容 -->
    </div>
    <div class="watermark-overlay" v-html="watermarkHtml"></div>
  </div>
</template>

<script>
export default {
  computed: {
    watermarkHtml() {
      const text = this.watermarkText
      return `
        <div style="
          position: absolute;
          width: 100%;
          height: 100%;
          pointer-events: none;
          background-repeat: repeat;
          background-image: url(${generateWatermark(text)});
        "></div>
      `
    }
  }
}
</script>

<style>
.list-wrapper {
  position: relative;
}
.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}
</style>

防止水印被移除

增加MutationObserver监控水印DOM变化，防止被恶意移除。

mounted() {
  this.protectWatermark()
},
methods: {
  protectWatermark() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (!document.querySelector('.watermark-overlay')) {
          this.$nextTick(() => {
            const wrapper = document.querySelector('.list-wrapper')
            const overlay = document.createElement('div')
            overlay.className = 'watermark-overlay'
            overlay.innerHTML = this.watermarkHtml
            wrapper.appendChild(overlay)
          })
        }
      })
    })

    observer.observe(document.body, {
      childList: true,
      subtree: true
    })
  }
}

响应式水印调整

监听窗口大小变化，调整水印密度和大小。

data() {
  return {
    watermarkDensity: 3 // 每行水印数量
  }
},
created() {
  window.addEventListener('resize', this.adjustWatermark)
},
beforeDestroy() {
  window.removeEventListener('resize', this.adjustWatermark)
},
methods: {
  adjustWatermark() {
    const width = window.innerWidth
    this.watermarkDensity = Math.max(2, Math.floor(width / 300))
  }
}

vue实现列表水印