水印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

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值