vue watermark水印添加

vue 水印实现

	Vue项目在页面添加水印功能, 不允许操作dom关闭水印

1.添加watermark-dom插件

 npm i watermark-dom --save

2. 引用 watermark-dom

import watermark from 'watermark-dom'

3. 初始化水印

import { onMounted, onBeforeUnmount, nextTick } from 'vue';
import { storageLocal } from '/@/utils/storage';

const handleWatermark = () => {
  nextTick(() => {
    const userInfo: any = storageLocal.getItem('userInfo');
    watermark.load({
      watermark_txt: userInfo.name + ' ' + userInfo.code,
      watermark_color: '#666' //水印字体颜色
    });
  });
};

onMounted(() => {
  handleWatermark();
});

4. 效果
   `

相当文档：https://github.com/saucxs/watermark-dom