vue自定义指令给指定元素添加水印

在utils创建一个waterMark.js文件

import Vue from 'vue'

Vue.directive('watermark', {
	update: (el, binding) => {
		function addWaterMarker(parentNode, userName) {// 水印文字，父元素，字体，文字颜色
			var can = document.createElement('canvas');
			console.log(binding);
			el.style.pointerEvents = "none"
			parentNode.appendChild(can);
			can.width = 100;
			can.height = 100;
			var cans = can.getContext('2d');
			cans.rotate(-20 * Math.PI / 180);
			cans.font = "16px Microsoft JhengHei";
			cans.fillStyle = '#999';
			cans.textAlign = 'left';
			cans.textBaseline = 'Middle';
			cans.fillText(userName, can.width / 3, can.height / 2);
			parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";

			console.log(can);
			//此方法是防止用户通过控制台修改样式去除水印效果
			/* MutationObserver 是一个可以监听DOM结构变化的接口。 */
			const observer = new MutationObserver(() => {

				const wmInstance = can.parentElement
				//如果标签在，只修改了属性，重新赋值属性
				if (wmInstance) {
					// 避免一直触发
					// observer.disconnect();
					// console.log('水印属性修改了');
					parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
				}
			})
			observer.observe(document.body, {
				attributes: true,
				subtree: true,
				childList: true,
			});
		}
		addWaterMarker(el, binding.value)
	}
})

在main文件里面引入

import '@/utils/waterMark.js';  // 添加水印

在需要用到的组件直接使用  userName是要显示的水印内容  

<canvas v-watermark="userName" class="canvas"> </canvas>

css样式 不固定 按需调整

  .ul {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    .canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      width: 100%;
      height: 100%;
    }
}