Vue实现页面添加水印功能
创建watermark.js文件
letwatermark={}
letsetWatermark=(str)=>{
letid='1.23452384164.123412416';
if(document.getElementById(id)!==null){
document.body.removeChild(document.getElementById(id));
}
//创建一个画布
letcan=document.createElement('canvas');
//设置画布的长宽
can.width=120;
can.height=120;
letcans=can.getContext('2d');
//旋转角度
cans.rotate(-15*Math.PI/180);
cans.font='18pxVedana';
//设置填充绘画的颜色、渐变或者模式
cans.fillStyle='rgba(200,200,200,0.40)';
//设置文本内容的当前对齐方式
cans.textAlign='left';
//设置在绘制文本时使用的当前文本基线
cans.textBaseline='Middle';
//在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
cans.fillText(str,can.width/8,can.height/2);
letdiv=document.createElement('div');
div.id=id;
div.style.pointerEvents='none';
div.style.top='30px';
div.style.left='0px';
div.style.position='fixed';
div.style.zIndex='100000';
div.style.width=document.documentElement.clientWidth+'px';
div.style.height=document.documentElement.clientHeight+'px';
div.style.background='url('+can.toDataURL('image/png')+')lefttoprepeat';
document.body.appendChild(div);
returnid;
}
//该方法只允许调用一次
watermark.set=(str)=>{
letid=setWatermark(str);
setInterval(()=>{
if(document.getElementById(id)===null){
id=setWatermark(str);
}
},500);
window.onresize=()=>{
setWatermark(str);
};
}
exportdefaultwatermark;
具体用法：
1.在App.vue文件中，导入该文件
importWatermarkfrom'@/common/js/watermark';//路径不要写错
2.在mounted函数中调用
mounted:function(){
Watermark.set("水印内容")
}
注意内容：
一般我们的水印内容是当前用户的id或者姓名，在App.vue文件的mounted函数中有可能获取不到Vuex的用户信息。
我们一般在路由跳转的时候来进行用户的登录和权限的判断，所以我们可以将调用水印的方法放在router.afterEach()方法中，在router.beforeEach（）方法中判断用户的登录和权限的判断，所以router.afterEach()方法中一定可以获取到vuex中的用户信息。
示例：
router.beforeEach((to,from,next)=>{
//登录判断
store.dispatch('getuser').then((user)=>{
if(to.path==='/'){
if(user.isLeader){
next('/Summary');
}else{next('/list');}
}else{
next();
}
}).catch((error)=>{
if(error.message==='noUser'){
//返回登录界面
}else{
Dialog.confirm({
title:'服务器错误',
message:'获取用户信息失败,可尝试重新进入系统。',
showCancelButton:false,
showConfirmButton:false
});
}
});
});
router.afterEach((to)=>{
/*路由发生变化修改页面title*/
if(to.meta.title){
changTitle(to.meta.title);
}
Watermark.set(store.state.user.userId);
});
以上这篇Vue实现页面添加水印功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。