这里使用了vue中的自定义指令
-
main.js
// vue 全局指令 --- 模块/组件式添加水印 Vue.directive('watermark',(el,binding)=>{ function addWaterMarker(str,parentNode,font,textColor){// 水印文字,父元素,字体,文字颜色 var can = document.createElement('canvas'); parentNode.appendChild(can); can.width = 150; can.height = 100; can.style.display = 'none'; var cans = can.getContext('2d'); cans.rotate(-20 * Math.PI / 180); cans.font = font || "13px Microsoft JhengHei"; cans.fillStyle = textColor || "rgba(180, 180, 180, 0.2)"; cans.textAlign = 'left'; cans.textBaseline = 'Middle'; cans.fillText(str, can.width / 14, can.height); parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; } addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor) })
-
使用(index.vue)
<div class="maincont" v-watermark="{text: msgval, textColor:'#ddd'}"> <div v-html="valtxt"></div> </div>