Vue implements adding watermark effect to the page

export function watermark(settings) {
  debugger;
  //Default settings var defaultSettings = {
      watermark_txt:"text",
      watermark_x:20, // watermark starting position x-axis coordinate watermark_y:20, // watermark starting position y-axis coordinate watermark_rows:5, // watermark rows watermark_cols:10, // watermark columns watermark_x_space:100, // watermark x-axis interval watermark_y_space:100, // watermark y-axis interval watermark_color:'#aaa', // watermark font color watermark_alpha:0.4, // watermark transparency watermark_fontsize:'15px', // watermark font size watermark_font:'Microsoft YaHei', // watermark font watermark_width:210, // watermark width watermark_height:80, // watermark length watermark_angle:15 // watermark tilt degree };
  //Use configuration items to replace default values, similar to jquery.extend
  if (arguments.length===1&&typeof arguments[0] ==="object" )
  {
      var src=arguments[0]||{};
      for(var keyS in src)
      {
          if (src[keyS]&&defaultSettings[keyS]&&src[keyS]===defaultSettings[keyS])
              continue;
          else if(src[keyS])
              defaultSettings[keyS]=src[keyS];
      }
  }

  var oTemp = document.createDocumentFragment();

  //Get the maximum width of the page var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth);
  var cutWidth = page_width*0.0150;
  var page_width=page_width-cutWidth;
  //Get the maximum height of the page var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight)+650;
  // var page_height = document.body.scrollHeight+document.body.scrollTop;
  //If the number of watermark columns is set to 0, or the number of watermark columns is set too large and exceeds the maximum page width, recalculate the number of watermark columns and the watermark x-axis interval if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
      defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space) - 1);
      defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1) - 10);
  }
  //If the number of watermark rows is set to 0, or the number of watermark rows is set too large and exceeds the maximum page length, recalculate the number of watermark rows and the watermark y-axis interval if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
      defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
      defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
  }
  var x;
  var y;
  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;

          var mask_div = document.createElement('div');
          mask_div.id = 'mask_div' + i + j;
          mask_div.className = 'mask_div';
          mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
          //Set the watermark div to display tilted mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
          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 makes the watermark not block the click event of the page//mask_div.style.border="solid #eee 1px";
          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";
          oTemp.appendChild(mask_div);
      };
  };
  document.body.appendChild(oTemp);
}

created() {
    let userId = getCookie("userId")
    watermark({watermark_txt:userId+" "+timeFormate(new Date())})
  }