首页 前端知识 【VUE】7、VUE项目中集成watermark实现页面添加水印

【VUE】7、VUE项目中集成watermark实现页面添加水印

2024-07-02 23:07:28 前端知识 前端哥 137 729 我要收藏

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

1、安装 watermark

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

"watermark-dom": "2.3.0"

然后执行命令

npm install

npm install --registry=https://registry.npm.taobao.org

安装就可以了

2、引入 watermark

在 App.vue 文件中引入 watermark

import watermark from "watermark-dom";

然后创建水印

mounted() {
  watermark.load({watermark_txt: "hello world"});
},

我设置的水印的内容为 【hello world】

3、效果展示

在这里插入图片描述
这样我们所有的页面都添加上了水印了

4、完整配置参数

let options = {
      // 水印内容
      watermark_txt: "text",
      // 水印起始位置x轴坐标
      watermark_x: 20,
      // 水印起始位置Y轴坐标
      watermark_y: 20,
      // 水印行数
      watermark_rows: 5,
      // 水印列数
      watermark_cols: 10,
      // 水印x轴间隔
      watermark_x_space: 100,
      // 水印y轴间隔
      watermark_y_space: 100,
      // 水印字体颜色
      watermark_color: '#aaa',
      // 水印透明度
      watermark_alpha: 0.4,
      // 水印字体大小
      watermark_fontsize: '15px',
      // 水印字体
      watermark_font: '微软雅黑',
      // 水印宽度
      watermark_width: 210,
      // 水印长度
      watermark_height: 80,
      // 水印倾斜度数
      watermark_angle: 15
    }

如您在阅读中发现不足,欢迎留言!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13840.html
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!