Vue集成watermark实现页面添加水印

原文链接: http://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html#%E9%9B%86%E6%88%90watermark%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E6%B7%BB%E5%8A%A0%E6%B0%B4%E5%8D%B0

在网站浏览中，常常需要网页水印，以便防止用户截图或录屏暴露敏感信息后，方便追踪用户来源。

1、在package.json文件dependencies节点增加watermark-dom依赖。

"watermark-dom": "2.3.0"

2、在AppMain.vue文件引入水印模块，示例如下：

import watermark from "watermark-dom";

export default {
  name: "AppMain",
  mounted() {
    // 加载水印
    const username = this.$store.state.user.name;
    watermark.load({ watermark_txt: username + "水印" });
  },
  computed: {
    .....
  }
};

3、访问页面，检查页面水印是否显示。

image-20230825085955644