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

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

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

}

如您在阅读中发现不足，欢迎留言！！！