页面添加水印功能

const watermark = {}

const setWatermark = (str) => {

  const id = '1.23452384164.123412415'

  if (document.getElementById(id) !== null) {

    document.body.removeChild(document.getElementById(id))

  }

  // 默认设置

  var defaultSettings = {

    watermark_txt: str,

    watermark_x: 30, // 水印起始位置x轴坐标

    watermark_y: 30, // 水印起始位置Y轴坐标

    watermark_rows: 4, // 水印行数

    watermark_cols: 2, // 水印列数

    watermark_x_space: 20, // 水印x轴间隔

    watermark_y_space: 20, // 水印y轴间隔

    watermark_color: '#aaa', // 水印字体颜色

    watermark_alpha: 0.3, // 水印透明度

    watermark_fontsize: '15px', // 水印字体大小

    watermark_font: '微软雅黑', // 水印字体

    watermark_width: 150, // 水印宽度

    watermark_height: 120, // 水印长度

    watermark_angle: 15// 水印倾斜度数

  }

  var oTemp = document.createDocumentFragment()

  var x

  var y

  for (var i = 0; i < 4; i++) {

    y = (100 + document.documentElement.clientHeight - 480) / 5 + ((document.documentElement.clientHeight - 480) / 5 + defaultSettings.watermark_height) * i

    for (var j = 0; j < 2; j++) {

      x = (document.documentElement.clientWidth - 300) / 3 + (defaultSettings.watermark_width + ((document.documentElement.clientWidth - 300) / 3)) * j

      var maskDiv = document.createElement('div')

      maskDiv.id = 'mask_div' + i + j

      maskDiv.className = 'mask_div'

      maskDiv.appendChild(document.createTextNode(defaultSettings.watermark_txt))

      // 设置水印div倾斜显示

      maskDiv.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'

      maskDiv.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'

      maskDiv.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'

      maskDiv.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'

      maskDiv.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)'

      maskDiv.style.visibility = ''

      maskDiv.style.position = 'fixed'

      maskDiv.style.left = x + 'px'

      maskDiv.style.top = y + 'px'

      maskDiv.style.overflow = 'hidden'

      maskDiv.style.zIndex = '9999'

      // mask_div.style.border="solid #eee 1px";

      maskDiv.style.opacity = defaultSettings.watermark_alpha

      maskDiv.style.fontSize = defaultSettings.watermark_fontsize

      maskDiv.style.fontFamily = defaultSettings.watermark_font

      maskDiv.style.color = defaultSettings.watermark_color

      maskDiv.style.textAlign = 'center'

      maskDiv.style.width = defaultSettings.watermark_width + 'px'

      maskDiv.style.height = defaultSettings.watermark_height + 'px'

      maskDiv.style.display = 'block'

      maskDiv.style.pointerEvents = 'none'// fangzi

      oTemp.appendChild(maskDiv)

    }

  }

  document.body.appendChild(oTemp)

  return id

}

// 该方法只允许调用一次

watermark.set = (str) => {

  setWatermark(str)

  // let id = setWatermark(str)

  // setInterval(() => {

  //  if (document.getElementById(id) === null) {

  //    id = setWatermark(str)

  //  }

  // }, 2000)

  // window.onresize = () => {

  //  setWatermark(str)

  // }

}

export default watermark

页面调用 watermark.set(“这里面就是要添加水印的内容”)