在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,方便追踪用户来源。
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
}
如您在阅读中发现不足,欢迎留言!!!