vue3+ts+自定义指令，生产页面水印

页面水印一般包含了用户信息，比如姓名，工号，部门等信息，
这些信息是可以从接口获取到的，也可以从本地存储中获取到的，
这里我们就从本地存储中获取到用户信息，然后将其作为水印的内容。

// 获取水印要显示的信息
const getUserInfo:any = () => {let userInfo: any = localStorage.getItem('yourKey')userInfo = userInfo ? JSON.parse(userInfo) : {}// 这里可以增加其它内容return `${userInfo?.name}-${userInfo?.phone}`
}

我们还可以给水印做一个基本的配置，比如水印的颜色、字体大小、背景、等等。

/*** @param text 水印文字* @param font 水印字体* @param color 水印颜色* @param fontSize 水印字体大小* @param rotate 水印旋转角度* @param opacity 水印透明度* @param width 水印宽度* @param height 水印高度*/
const watermarkConfig:any = {font: 'Arial',color: 'rgba(191, 126, 126, 1)',fontSize: 14,rotate: 30,opacity: 0.2,width:200,height:150
}

下面是生成水印的代码

// 生成水印
/*** @param bindingValue 水印配置* @returns 水印样式*/
const getCanvas = (bindingValue: any) => {const { text, font = watermarkConfig.font, color = watermarkConfig.color, fontSize = watermarkConfig.fontSize, rotate = watermarkConfig.rotate, opacity = watermarkConfig.opacity } = bindingValue || {}const watermarkText = text || getUserInfo()// 创建水印画布const canvas = document.createElement('canvas')canvas.width = watermarkConfig.widthcanvas.height = watermarkConfig.heightconst ctx = canvas.getContext('2d')if (ctx) {ctx.font = `${fontSize}px ${font}`ctx.fillStyle = colorctx.globalAlpha = opacityctx.rotate(-rotate * Math.PI / 180)ctx.fillText(watermarkText, -20, canvas.height - 50)}// 将画布内容转换为 base64 编码的图片const base64Url = canvas.toDataURL()// 创建水印样式const watermarkStyle = `position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('${base64Url}');background-repeat: repeat;pointer-events: none;`return watermarkStyle
}

配置在vue元素的生命周期钩子函数中，在挂载和更新的时候，触发水印的更新

const watermark = {mounted(el:any, binding:any) {// 创建水印元素const watermarkElement = document.createElement('div')watermarkElement.className = 'global-watermark'watermarkElement.style.cssText = getCanvas(binding.value)// 设置元素的定位为相对定位，以便水印元素可以相对于它定位el.style.position = 'relative'// 将水印元素添加到目标元素中el.appendChild(watermarkElement)},updated(el:any, binding:any) {// 当指令绑定的值更新时，重新生成水印const watermarkElement = el.querySelector('.global-watermark')if (watermarkElement) {el.removeChild(watermarkElement)}const newWatermarkElement = document.createElement('div')newWatermarkElement.style.cssText = getCanvas(binding.value)el.style.position = 'relative'el.appendChild(newWatermarkElement)}
}

在main.ts主入口中引入watermark，然后挂载在自定义指令方法上。

import watermark from '@/utils/waterMark'
app.directive('watermark', watermark)

最后在项目的.vue文件中直接v-watermark使用即可，可以根据不同的页面传入不同的参数v-watermark=""，显示不同水印样式。