vue水印怎么设置中间,vue水印怎么设置
本文主要实现了在整个项目背景中添加一个自定义水印,可以改变水印的拷贝和字体颜色。有一定的参考价值,感兴趣的朋友可以参考一下。
项目场景
将自定义水印添加到项目的整个背景中,可以更改水印的副本和字体颜色。
实现思路
这里用的技术主要是画布。在水印过程中,主要利用了画布的特性。
使用canvas特性生成base64格式的图片文件,然后设置其字体大小、颜色等。
最后设置为背景图片,实现了页面的水印效果。
实现效果
实现代码
模板
div class=水印
div-Watermarker= { text: Carlo Vest-版权所有,textcolor: RGBA (180,180,180,0.4)}
Div= water-marker-item 试题,试题,试题,试题,试题/div
/div
/div
/模板
脚本
从导入水印././指令/测试/水印
导出默认值{
指令:{
水印
},
data(){
返回{
}
},
方法:{
}
}
/脚本
样式lang=scss 。水位标志{
高度:300px。水标记项目{
行高:300像素;
}
}
/风格
waterMarker.js文件如下所示:
函数addWaterMarker(str,parentNode,font,textColor) {
//水印文本,父元素,字体,文本颜色
var can=document . createelement( canvas )
parentNode.appendChild(can)
罐宽=200
高度=150
can.style.display=none
var cans=can.getContext(2d )
cans.rotate((-20 *数学。圆周率)/180)
cans . font=font 16px Microsoft JhengHei
cans . fill style=text color rgba(180,180,180,0.3)
cans.textAlign=left
cans.textBaseline=Middle
cans.fillText(str,can.width/10,can.height/2)
parent node . style . background image= URL( can . toda taurl( image/png ))
}
const waterMarker={
bind:函数(el,binding) {
addWaterMarker(binding . value . text,el,binding.value.font,binding.value.textColor)
},
}
导出默认水印
这就是这篇关于使用自定义指令在页面底部添加Vue水印的文章。有关Vue页面底部水印的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。