web界面添加水印

功能

Vue版本的水印，使用vue的自定义指令；为了防止用户删除水印，轮询查看水印div是否存在。

这个版本是给el-table的内容区域加水印，如果要给其他元素加水印，修改el.querySelector里的元素的class即可。

使用

Vue.directive('waterMark', WaterMark文件);

在对应元素上使用v-waterMark="xxx"；

// waterMark.js vue2版本
// vue3版本把inserted换成created unbind换成unmounted
export default {
  inserted(el, binding) {
    const text = binding.value || 'Watermark'
    const canvas = document.createElement('canvas')
    canvas.width = 200
    canvas.height = 150
    const ctx = canvas.getContext('2d')
    ctx.rotate(-20 * Math.PI / 180)
    ctx.font = '16px Microsoft YaHei'
    ctx.fillStyle = 'rgba(180, 180, 180, 0.3)'
    ctx.textAlign = 'left'
    ctx.textBaseline = 'middle'
    ctx.fillText(text, 20, 100)
    const watermarkBase64 = canvas.toDataURL('image/png')

    const createWatermark = () => {
      const wmDiv = document.createElement('div')
      wmDiv.className = 'watermark-layer'
      wmDiv.style.position = 'absolute'
      wmDiv.style.top = '0'
      wmDiv.style.left = '0'
      wmDiv.style.width = '100%'
      wmDiv.style.height = '100%'
      wmDiv.style.pointerEvents = 'none'
      wmDiv.style.zIndex = '10'
      wmDiv.style.backgroundImage = `url(${watermarkBase64})`
      wmDiv.style.backgroundRepeat = 'repeat'
      return wmDiv
    }

    const bodyWrapper = el.querySelector('.el-table__body-wrapper')
    if (!bodyWrapper) return

    bodyWrapper.style.position = 'relative'
    const wmDiv = createWatermark()
    bodyWrapper.appendChild(wmDiv)

    // 轮询检查
    const interval = setInterval(() => {
      const exists = bodyWrapper.querySelector('.watermark-layer')
      if (!exists) {
        const newWm = createWatermark()
        bodyWrapper.appendChild(newWm)
      }
    }, 1000)

    // 保存到元素上，方便解绑时清理
    el._watermarkInterval = interval
  },

  unbind(el) {
    clearInterval(el._watermarkInterval)
  }
}

结果