vue2 在整个系统页面上加上用户姓名的水印创建 mixin/watermark.js// /mixin/watermark.jsexportdefault{data(){return{waterObserver:null}},mounted(){// 登录页不渲染水印if(this.$route.path/login)returnthis.$nextTick((){this.renderWaterMark()this.watchWaterMark()})},// 路由切换监听watch:{$route(to){// 跳登录页销毁水印if(to.path/login){this.destroyWaterMark()return}// 从登录页进入其他页面重新生成水印this.renderWaterMark()this.watchWaterMark()}},beforeDestroy(){this.destroyWaterMark()},methods:{// 获取用户名getUserName(){returnthis.$store.state.user.name||匿名用户},// 生成水印renderWaterMark(){// 先清旧水印this.destroyWaterMark()constwaterBoxdocument.createElement(div)waterBox.idglobal-water-markwaterBox.style.cssTextposition: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; background-repeat: repeat;constcanvasdocument.createElement(canvas)constctxcanvas.getContext(2d)canvas.width200canvas.height120ctx.rotate(-20*Math.PI/180)ctx.font13px sans-serifctx.fillStylergba(150,150,150,0.2)ctx.fillText(this.getUserName(),10,70)waterBox.style.backgroundImageurl(${canvas.toDataURL()})document.body.appendChild(waterBox)},// 监听水印防删除 窗口缩放watchWaterMark(){window.addEventListener(resize,this.renderWaterMark)this.waterObservernewMutationObserver((){if(!document.getElementById(global-water-mark)){this.renderWaterMark()}})this.waterObserver.observe(document.body,{childList:true,subtree:true})},// 销毁水印、清除监听核心方法destroyWaterMark(){// 断开dom监听if(this.waterObserver){this.waterObserver.disconnect()this.waterObservernull}// 移除resize事件window.removeEventListener(resize,this.renderWaterMark)// 删除水印domconstwaterBoxdocument.getElementById(global-water-mark)if(waterBox)waterBox.remove()}}}main.js 全局注册混入所有页面自动生效importVuefromvueimportwaterMarkMixinfrom/mixin/watermarkVue.mixin(waterMarkMixin)
