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;
  }