给dom元素添加背景水印

/**
 * @Description:生成水印
 * @Author: pancj
 * @Date: 2021-08-18
 */
export function addWatermark(element, config) {
  // 获取元素的坐标
  function getOffset(el) {
    if (el.offsetParent) {
      return {
        x: el.offsetLeft + getOffset(el.offsetParent).x,
        y: el.offsetTop + getOffset(el.offsetParent).y
      }
    }
    return {
      x: el.offsetLeft,
      y: el.offsetTop
    }
  }
  if (!element) return
  // 默认配置
  const _config = {
    text1: '', // 文本1
    text2: '', // 文本2
    start_x: 0, // x轴起始位置
    start_y: 30, // y轴起始位置
    space_x: 100, // x轴间距
    space_y: 100, // y轴间距
    width: 210, // 宽度
    height: 40, // 长度
    fontSize: 20, // 字体
    color: '#aaa', // 字色
    alpha: 0.4, // 透明度
    rotate: 15, // 倾斜度
    correctedHei: 0
  }
  // 替换默认配置
  if (arguments.length === 2 && typeof arguments[1] === 'object') {
    const src = arguments[1] || {}
    for (const key in src) {
      if (src[key] && _config[key] && src[key] === _config[key]) {
        continue
      } else if (src[key]) {
        _config[key] = src[key]
      }
    }
  }
  // 节点的总宽度
  const total_width = element.scrollWidth
  // 节点的总高度
  const total_height = element.scrollHeight + _config.correctedHei
  // 创建文本碎片，用于包含所有的插入节点
  const mark = document.createDocumentFragment()
  // 水印节点的起始坐标
  const position = getOffset(element)
  let x = position.x + _config.start_x; let y = position.y + _config.start_y
  // 先循环y轴插入水印
  do {
    // 再循环x轴插入水印
    do {
      // 创建单个水印节点
      const item = document.createElement('div')
      item.className = 'watermark-item'
      // 设置节点的样式
      item.style.position = 'absolute'
      item.style.zIndex = 99999
      item.style.left = `${x}px`
      item.style.top = `${y}px`
      item.style.width = `${_config.width}px`
      item.style.height = `${_config.height}px`
      item.style.border = `1px dashed #aaa`
      item.style.fontSize = `${_config.fontSize}px`
      item.style.paddingTop = `${_config.height / 2 - _config.fontSize / 2}px`
      item.style.color = _config.color
      item.style.textAlign = 'center'
      item.style.opacity = _config.alpha
      item.style.filter = `alpha(opacity=${_config.alpha * 100})`
      // item.style.filter = `opacity(${_config.alpha * 100}%)`;
      item.style.webkitTransform = `rotate(-${_config.rotate}deg)`
      item.style.MozTransform = `rotate(-${_config.rotate}deg)`
      item.style.msTransform = `rotate(-${_config.rotate}deg)`
      item.style.OTransform = `rotate(-${_config.rotate}deg)`
      item.style.transform = `rotate(-${_config.rotate}deg)`
      item.style.pointerEvents = 'none' // 让水印不遮挡页面的点击事件
      // 创建text1水印节点
      const text1 = document.createElement('div')
      text1.appendChild(document.createTextNode(_config.text1))
      item.append(text1)
      // 创建text2水印节点
      const text2 = document.createElement('div')
      text2.appendChild(document.createTextNode(_config.text2))
      item.append(text2)
      // 添加水印节点到文本碎片
      mark.append(item)
      // x坐标递增
      x = x + _config.width + _config.space_x
      // 超出文本右侧坐标停止插入
    } while (total_width + position.x > x + _config.width)
    // 重置x初始坐标
    x = position.x + _config.start_x
    // y坐标递增
    y = y + _config.height + _config.space_y
    // 超出文本底部坐标停止插入
  } while (total_height + position.y > y + _config.height)
  // 插入文档碎片
  element.append(mark)
}
// 调用时
// 先获取DOM元素,传入需要显示的内容text1,mounted异步调用方法
// mounted() {
// this.$nextTick(
//   const element = document.querySelector('dom')
//   addWatermark(element, { text1: this.watermarkName, start_x: -200 })
// )
// },

先创建js文件粘过去

import 导入js文件,然后调用传入DOM元素和需要显示的内容