vue添加水印,
本文主要详细介绍vue项目为某个区域绘制水印。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文通过一个例子来分享vue给一个区域加水印的实现，供大家参考。具体如下。
先看效果：
其实原理很简单，就是用画布画一个图，然后设置div的背景。在这里，参考别人的想法并根据自己的需求，我封装了一个可以直接在项目中使用的插件，这里可以对某一个单独的区域设置水印：
使用严格
常量水印={}
/**
*
* @ param {要设置的水印内容} str
* @ param {要添加水印的容器}容器
*/
const setWatermark=(str，container)={
const id= 1.23452538637
if (container===undefined) {
返回
}
//检查页面上有没有，有就删除。
if (document.getElementById(id)！==null) {
const child element=document . getelementbyid(id)
child element . parent node . remove child(child element)
}
var width=container.offsetwidth//Get父容器宽度
var height=container.offsetheight//Get父容器的高度
container . style . position= relative //将布局设置为相对布局
//创建画布元素(首先制作背景图像)
const can=document . createelement( canvas )
Can.width=390 //设置每个块的宽度
Can.height=200 //高度
const cans=can . Get context( 2D )//获取画布
cans . rotate(-20 * Math.PI/180)//逆时针旋转/9
Cans.font=20px Vedana //设置字体
Cans.fillstyle= rgba (200，200，200，0.20)//设置字体的颜色
Cans.textAlign=left //Text对齐
cans . Text baseline= Middle //Text baseline
Cans.filltext (str，0，4 * can . height/5)//绘制文本
//创建一个div元素
const div=document . createelement( div )
Div.id=id //集合id
div . style . pointer events= none //取消所有事件
div.style.top=0px
div.style.left=0px
div.style.position=absolute
div.style.zIndex=100000
div . style . width=container width px
div . style . height=container height 像素
div . style . background= URL( can . toda taurl( image/png ))左上方重复
Container.appendChild(div) //追加到页面
退货id
}
//此方法只允许调用一次
watermark.set=(str，容器)={
let id=setWatermark(字符串，容器)
setInterval(()={
if(document . getelementbyid(id)===null){
id=setWatermark(字符串，容器)
}
}, 500)
//侦听页面大小的变化
window.onresize=()={
setWatermark(字符串，容器)
}
}
导出默认水印
如何在页面中使用它：
插件介绍：
从“@/外部/水印”导入水印
然后在需要的位置设置refs=xxx ，因为在vue项目中，不能直接通过document.getElement的方式获取元素，只能靠这个。$refs.xxx:
div ref= directrecordwp class= wrapper
然后在mounted的钩子函数里这样写：
//设置页面水印
Watermark.set (this。名字，这个。$参考文献。DirectRecordWP，高校党政云档案管理平台)
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。