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

原创

已于 2025-05-06 18:18:00 修改 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-05-06 16:33:09 首次发布

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

// 获取水印要显示的信息
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)'