Vue项目全局水印的实现

实现思路

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

步骤一

建立一个waterMarker.vue组件,实现如下:

  
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组件内

你可能感兴趣的:(11,html,vue.js,javascript,css)