Vue项目全局水印的实现

实现思路

首先，这里水印的制作是通过canvas画布的技术结合固定定位position: fixed在页面进行定位的展示。
当然少不了css鼠标穿透效果：pointer-event:none

步骤一

建立一个waterMarker.vue组件，实现如下：

  <div id="waterMarker" :class="$style.waterMarker"></div>
metheods:
	addWaterMarker(str) {
      let can = document.createElement('canvas');
      let body = document.getElementById('waterMarker');
      body.appendChild(can);
      can.width=200;
      can.height=150;
      can.style.display='none';
      let cans = can.getContext('2d');
      cans.rotate(-45*Math.PI/180);
      cans.font = "26px Microsoft JhengHei";
       cans.fillStyle = "rgba(17, 17, 17, 0.20)";
      cans.textAlign = 'right';
      cans.textBaseline = 'Middle';
      cans.fillText(str,can.width/4,can.height/1.5);
      body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
    }

步骤二

在项目主页面入App.vue页面引入水印组件,并进行注册，安装到App.vue组件内

<div class="water>
 	<water-marker />
 </div>

css布局：
	.water {
 	  position: fixed;
 	  left: 0;
 	  right: 0;
 	  top: 0;
 	  bottom: 0;
 	  pointer-events: none;
 	}

最后刷新下页面，全局水印就实现了