水印watermark

第一步:npm获取水印组件包

npm install watermark-dom

第二步:引入水印模块

import watermark from ‘watermark-dom’ 或者 var watermarkDom = require(“watermark-dom”)

根据业务需要，我是登入之后的页面才有水印，前者我是放在验证用户登录状态js文件夹，在router.beforeEach钩子判断是否有token的方法里写

watermark.init({ watermark_txt: “qinglinn” })//用来初始化水印
watermark.load({ watermark_txt: “qinglinn” })//用来加载水印

手动移除水印

watermark.remove();

“watermark_txt”:“测试水印”,
“watermark_x”:20,//水印起始位置x轴坐标
“watermark_y”:20,//水印起始位置Y轴坐标
“watermark_rows”:0,//水印行数
“watermark_cols”:0,//水印列数
“watermark_x_space”:100,//水印x轴间隔
“watermark_y_space”:50,//水印y轴间隔
“watermark_font”:‘微软雅黑’,//水印字体
“watermark_color”:‘black’,//水印字体颜色
“watermark_fontsize”:‘18px’,//水印字体大小
“watermark_alpha”:0.15,//水印透明度，要求设置在大于等于0.003
“watermark_width”:150,//水印宽度
“watermark_height”:100,//水印长度
“watermark_angle”:15,//水印倾斜度数

有个尴尬的事情就是页面太长，默认的滚动会把水印滚上去，下面出来的就没有水印效果，除非重新加载哦，但是vue的路由钩子加载的每个模块都会调用一次。

我的解决方案就是把页面做个局部滚动的
我在vue的主体区<router-view>用elementui的<el-scrollbar wrap-class="scrollbar-wrapper"> <transition name="fade-transform" mode="out-in"> <router-view/> </transition></el-scrollbar>其中用了模块加载过渡效果

对了，还有一个会报createShadowRoot的黄色警告，说已弃用别的替代

/* 判断浏览器是否支持createShadowRoot方法*/
// if(typeof otdiv.createShadowRoot === ‘function’){
// shadowRoot = otdiv.createShadowRoot();
if(typeof otdiv.attachShadow === ‘function’){
/* createShadowRoot Deprecated. Not for use in new websites. Use attachShadow*/
shadowRoot = otdiv.attachShadow({mode: ‘open’});
}else{
shadowRoot = otdiv;
}
//otdiv是水印外壳div