Vue global watermark (except login page)

Requirements: Add watermarks to all pages except login. The watermark information is XX+XX mobile phone number (this part of information can be dynamically displayed from the backend, or can be statically assigned to the watermark). Different methods are given below based on these two situations.

Actions required for both solutions:
1. Create a directory utils under src
2. Create a waterMark.js file in the utils directory

//waterMark.js文件
let watermark = {
    
    }
let setWatermark = (str) => {
    
    
  let id = '1.98562322123412416';
  if (document.getElementById(id) !== null) {
    
    
    document.body.removeChild(document.getElementById(id));
  }
  //创建一个画布
  let can = document.createElement('canvas');
  //设置画布的长宽
  can.width = 160;
  can.height = 160;
  let cans = can.getContext('2d');
  //旋转角度
  cans.rotate(-15 * Math.PI / 180);
  cans.font = '18px Vedana';
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = 'rgba(200, 200, 200, 0.40)';
  //设置文本内容的当前对齐方式
  cans.textAlign = 'left';
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = 'Middle';
  //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str, can.width / 8, can.height / 2);

  let div = document.createElement('div');
  div.id = id;
  div.style.pointerEvents = 'none';
  div.style.top = '30px';
  div.style.left = '0px';
  div.style.position = 'fixed';
  div.style.zIndex = '100000';
  div.style.width = document.documentElement.clientWidth + 'px';
  div.style.height = document.documentElement.clientHeight + 'px';
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
  document.body.appendChild(div);
  return id;
}
// 该方法只允许调用一次
watermark.set = (str) => {
    
    
  let id = setWatermark(str);
  setInterval(() => {
    
    
    if (document.getElementById(id) === null) {
    
    
      id = setWatermark(str);
    }
  }, 500);
  window.onresize = () => {
    
    
    setWatermark(str);
  };
}
export default watermark;

statically set watermark

1. If you want to display the watermark on the login interface, you can import the waterMark.js file in the APP.vue file, and call watermark in the mounted function;

code show as below:

<script>
    import warterMark from './utils/warterMark.js';
    export default {
    
    
        mounted: function() {
    
    
            warterMark.set("水印")
        },
    }
</script>

2. If the login page does not display the watermark, you need to import the watermark.js file in the main.js file, determine whether it is a login page in the route.beforeEach() method, and finally call the watermark method.

code show as below:

import warterMark from './utils/warterMark.js';
  router.afterEach((item) =>{
    
    
    if(item.name !== 'login'){
    
    
        warterMark.set("水印")
    }    
})

Vue global watermark (except login page)

Guess you like