封装自定义水印指令

在项目中创建一个watermark.js文件，封自定义自定的方法，这个文件不需要修改可以直接复制粘贴使用，当然可以根据自己的水印样式需求，去修改文件中的属性设置；

javascript">
// 生成包含水印文本的图片方法
function generateWatermark(text, fontSize, color) {const canvas = document.createElement('canvas'); // 创建canvas元素canvas.width = 300; // 设置canvas宽度canvas.height = 160; // 设置canvas高度const ctx = canvas.getContext('2d'); // 获取2D绘图上下文ctx.font = `${fontSize}px Arial`; // 设置字体大小和字体样式ctx.fillStyle = color; // 设置字体颜色ctx.translate(20, canvas.height - 20); // 平移坐标原点ctx.rotate(-Math.PI / 6); // 旋转角度const watermarkText = text;ctx.fillText(watermarkText, 0, 0); // 绘制文本return canvas.toDataURL('image/png'); // 将canvas内容转换为base64格式的图片
}
//应用水印到指定元素
// el:要添加水印的元素、color:字体颜色、text:水印文本、fontSize:字体大小
function applyWatermark(el, text, fontSize, color) {const watermarkUrl = generateWatermark(text, fontSize, color);const watermarkLayer = document.createElement('div');watermarkLayer.style.cssText = `  position: absolute;  top: 0; left: 0;z-index:100;width:100%;  height: 100%;  background-image: url(${watermarkUrl});  background-repeat: repeat;  pointer-events: none;  `;el.style.position = 'relative'; // 应用样式el.appendChild(watermarkLayer); // 将水印层添加到元素中
}export default {bind(el, binding, vnode) {const defaultText = '默认水印'; // 默认水印文本const defaultFontSize = 16; // 默认字体大小const defaultColor = 'rgba(0, 0, 0, 0.2)'; // 默认字体颜色applyWatermark(el, defaultText, defaultFontSize, defaultColor);},unbind(el) {el.removeChild(el.lastChild);}
}

在main.js中全局注册指令

javascript">//引入封装的文件
import watermarkFile from './components/v1/watermark.js'
//全局注册指定
Vue.directive('watermark', watermarkFile)

项目中使用指令

可以在自己需要添加水印的html标签上直接添加v-watermark指令；

javascript"><div v-watermark>展示内容区域</div>

完成，这样你就可以里看到你想要的水印啦；