文字水印 vue

设计思路：

• 排除 不需要水印的url
• 设置水印属性
• 循环行列
• 使用 createDocumentFragment （文档片段）实现，不会引起页面回流， 性能 更好

模板

// 样子跟这个 差不多 但是 实现方式不一样

摘要

Watermark 水印 | Avue (avuejs.com)(图片引用)

首先监听路由， 获取需要水印 及不需要水印的url

  watch:{
    $route:{
      handler (val, oldval) {
        let paths = ['/login', '/404', '/403', '/500']
        this.$nextTick(() => {
          if (paths.includes(val.path)) { //如果是以上url 则 不需要水印
            let my = document.getElementById("frame")
            my && my.parentNode.removeChild(my)
          } else if ((!paths.includes(val.path) && paths.includes(oldval.path)) || (!paths.includes(val.path) && oldval.path === '/')) {
            this.$nextTick(() => {
              this.watermark()
            })
          } else if (!(paths.includes(val.path) && paths.includes(oldval.path)) && !document.getElementById("frame")) {
            this.$nextTick(() => {
              this.watermark()
            })
          }
        })
      },
      // 深度观察监听
      // deep: true
    }
  },
复制代码

   watermark() {
	// 认设置
      let info = getStore({name: 'userInfo'})
      if (isNull(info)) {
        return
      }
        let defaultSettings = {
        watermarl_element: "avue-view", // 要绘制元素的容器id
        watermark_txt: `${info.userName}-<br/>`,
        watermark_img: '',
        watermark_x: 20, // 水印起始位置x轴坐标
        watermark_y: 50, // 水印起始位置Y轴坐标
        watermark_rows: 5, // 水印行数
        watermark_cols: 3, // 水印列数
        watermark_x_space: 100, // 水印x轴间隔
        watermark_y_space: 50, // 水印y轴间隔
        watermark_color: '#3e7ff7', // 水印字体颜色
        watermark_alpha: 0.2, // 水印透明度
        watermark_fontsize: '20px', // 水印字体大小
        watermark_font: '微软雅黑', // 水印字体
        watermark_width: 350, // 水印宽度
        watermark_height: 120, // 水印长度
        watermark_angle: 15 // 水印倾斜度数
        }
        let oTemp = document.createDocumentFragment();
        let maskElement = document.getElementsByClassName(defaultSettings.watermarl_element)[1] || document.body;
        //获取页面最大宽度
        let page_width = Math.min(maskElement.scrollWidth, maskElement.clientWidth);
        //获取页面最大高度
        let page_height = Math.min(maskElement.scrollHeight, maskElement.clientHeight);
        //水印数量自适应元素区域尺寸
        defaultSettings.watermark_cols = Math.ceil(page_width / (defaultSettings.watermark_x_space + defaultSettings.watermark_width));
        defaultSettings.watermark_rows = Math.ceil(page_height / (defaultSettings.watermark_y_space + defaultSettings.watermark_height));
        let x
        let y
      let frame = document.createElement('div')
      frame.setAttribute('id', 'frame')
      oTemp.appendChild(frame)
        for (var i = 0; i < defaultSettings.watermark_rows; i++) {
            y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
	for (var j = 0; j < defaultSettings.watermark_cols; j++) {
            x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
  let mask_div = document.createElement('div')
    mask_div.id = 'mask_div' + i + j
    mask_div.className = 'mask_div';
    // mask_img.className = 'mask_img';				//mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
mask_div.innerHTML = (defaultSettings.watermark_txt);
// mask_img.src = defaultSettings.watermark_img;
// mask_img.style.width = "150px";
// mask_img.style.height = "50px";

// 空白图片会有占位,判断src为空时移除img标签  不为空时添加img
// if(defaultSettings.watermark_img == ""){
// 	mask_div.remove(mask_img);
// }else{
// 	mask_div.append(mask_img);
// }
//设置水印div倾斜显示
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"
mask_div.style.visibility = ""
mask_div.style.position = "absolute"
mask_div.style.left = x + 'px'
mask_div.style.top = y + 'px'
mask_div.style.overflow = "hidden"
mask_div.style.zIndex = "9999"
mask_div.style.pointerEvents = 'none'
//pointer-events:none  让水印不遮挡页面的点击事件
                            //mask_div.style.border="solid #eee 1px"
//兼容IE9以下的透明度设置
// mask_div.style.filter="alpha(opacity=50)";
mask_div.style.opacity = defaultSettings.watermark_alpha
mask_div.style.fontSize = defaultSettings.watermark_fontsize
mask_div.style.fontFamily = defaultSettings.watermark_font
mask_div.style.color = defaultSettings.watermark_color
mask_div.style.textAlign = "center"
mask_div.style.width = defaultSettings.watermark_width + 'px'
mask_div.style.height = defaultSettings.watermark_height + 'px'
mask_div.style.display = "block"
frame.appendChild(mask_div)
        }
}
maskElement.appendChild(oTemp)
}
复制代码