Vue自定义指令给box添加水印

1、创建directive.js，并引入/src/utils下

import Vue from 'vue'
Vue.directive('watermark',(el,binding)=>{
function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色
var can = document.createElement('canvas');
parentNode.appendChild(can);
can.width = 130;
can.height = 180;
can.style.display = 'none';
var cans = can.getContext('2d');
cans.rotate(-40 * Math.PI / 180);
cans.font = font || "18px Microsoft JhengHei";
cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
cans.textAlign = 'center';
cans.textBaseline = 'Middle';
cans.fillText(str, can.width / 5, can.height / 3);
parentNode.style.zIndex = '100000'
parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})

2、在main.js中全局引入

import
'@/utils/directives'

3、水印使用

<div class="watermark"
v-watermark="{text:'水印文字',textColor:'rgba(180, 180, 180, 1)'}">
</div>

在所需要盒子的div上直接使用v-watermark自定义指令即可

 解决水印会被子盒子盖住的问题

1）建立一个专门的水印盒子（大小自定）

2）用定位将盒子固定在所需位置

3）因为parentNode.style.zIndex = '100000'，水印优先级已经最高，所以会覆盖下面盒子的各种事件，只需在水印盒子的style里加上pointer-events: none即可，可达到事件穿透。

.watermark {
position: absolute;
top: 10px;
left: 10px;
width: 480px;
height: 610px;
pointer-events: none;
}

最后

以上就是会撒娇大叔为你收集整理的Vue自定义指令给box添加水印的全部内容，希望文章能够帮你解决Vue自定义指令给box添加水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。