1、引入 watermark-dom 插件
npm i watermark-dom --save
2、App.vue 中引入
import Watermark from 'watermark-dom'
3、获取对应用户信息并绘制水印
const { userName, phone } = info
// 初始化水印
Watermark.init({
watermark_txt: `${phone}-${userName}`, // 水印文字
watermark_alpha: 0.2, // 水印透明度
watermark_angle: 45, // 水印角度
watermark_width: 200, // 水印宽度
watermark_height: 50, // 水印高度
watermark_x_space: 50, // 水平间距
watermark_y_space: 100, // 垂直间距
watermark_color: '#cccccc', // 水印字体颜色
watermark_font: '12px', // 水印字体
watermark_font_width: 200, // 水印字体宽度
watermark_font_height: 50, // 水印字体高度
watermark_content: '' // 水印内容
})
