Design idea:

  • Exclude urls that do not require watermarks
  • Setting Watermark Properties
  • Cycle procession
  • Use createDocumentFragment (document fragment) implementation, does not cause page backflow, better performance

The template

// It looks like this, but the implementation is different

Abstract

Watermark Watermark | Avue (avuejs.com) (reference)

Firstly, the route is monitored to obtain the URL that needs watermark and that does not need watermark


  watch: {$route:{
      handler (val, oldval) {
        let paths = ['/login'.'/ 404'.'/ 403'.'/ 500']
        this.$nextTick(() = > {
          if (paths.includes(val.path)) { // If the url is above, no watermark is required
            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 observation monitor
      // deep: true}},Copy the code
   watermark() {
	/ / set
      let info = getStore({name: 'userInfo'})
      if (isNull(info)) {
        return
      }
        let defaultSettings = {
        watermarl_element: "avue-view".// The container ID of the element to draw
        watermark_txt: `${info.userName}-<br/>`.watermark_img: ' '.watermark_x: 20.// Start position of watermark x coordinates
        watermark_y: 50.// Start position of watermark Y coordinates
        watermark_rows: 5.// Number of watermark lines
        watermark_cols: 3.// Number of watermark columns
        watermark_x_space: 100.// Watermark x axis interval
        watermark_y_space: 50.// Watermark the Y-axis interval
        watermark_color: '#3e7ff7'.// Watermark font color
        watermark_alpha: 0.2.// Watermark transparency
        watermark_fontsize: '20px'.// Watermark font size
        watermark_font: Microsoft Yahei.// Watermark font
        watermark_width: 350.// The watermark width
        watermark_height: 120.// The watermark length
        watermark_angle: 15 // The watermark tilt degree
        }
        let oTemp = document.createDocumentFragment();
        let maskElement = document.getElementsByClassName(defaultSettings.watermarl_element)[1] | |document.body;
        // Get the maximum page width
        let page_width = Math.min(maskElement.scrollWidth, maskElement.clientWidth);
        // Get the maximum page height
        let page_height = Math.min(maskElement.scrollHeight, maskElement.clientHeight);
        // The number of watermarks ADAPTS to the element area size
        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";

// If SRC is empty and img tag is not empty, add img tag
// if(defaultSettings.watermark_img == ""){
// mask_div.remove(mask_img);
// }else{
// mask_div.append(mask_img);
// }
// Set the watermark div tilt display
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 Lets the watermark not block click events on the page
                            //mask_div.style.border="solid #eee 1px"
// Compatible with IE9 transparency Settings below
// 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)
}
Copy the code