Vue-水印封装

1.directives/index.js

 1 import Vue from 'vue'
 2  
 3 Vue.directive('watermark',(el,binding)=>{
 4     function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色
 5         var can = document.createElement('canvas');
 6         parentNode.appendChild(can);
 7         can.width = 200;
 8         can.height = 200;
 9         can.style.display = 'none';
10         var cans = can.getContext('2d');
11         cans.rotate(-45 * Math.PI / 300);
12         cans.font = font || "14px Microsoft JhengHei";
13         cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
14         cans.textAlign = 'left';
15         cans.textBaseline = 'Middle';
16         cans.fillText(str, can.width / 9, can.height / 2);
17         parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
18     }
19     addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
20 })

2.全局引入

1 import './utils/directives'

3.使用

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