@you-want/watermark v1.0.1

watermark

添加 watermark 水印，可确保系统保密性、安全性，降低数据泄密风险，也是产品的一种专属标签的体现。

其简单轻量，支持多属性配置，动态计算水印，水印防被删（监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加）。

特性

• 多属性配置，简单易上手
• 动态计算水印
• 水印防被删(监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加)
• 内置 3 种全局 API 方法：init()，load()，remove()。
• 原理：pointer-events 事件穿透属性，Shadow DOM(影子DOM)，opacity等

使用方法

安装

npm install @you-want/watermark

yarn add @you-want/watermark

pnpm add @you-want/watermark

使用

import watermark from '@you-want/watermark'

// 手动加载水印
watermark.load({ watermark_txt: "you-want" })
// 初始化水印
watermark.init({ watermark_txt: ["you-want", "watermark"] })
// 移除水印 
watermark.remove()

属性配置

需要用到的就设置一下，不需要用到的就可以不设置，插件内部会有默认值的。

watermark_txt: '', // 水印的内容 多行则传数组[]
watermark_x: 20, // 水印起始位置x轴坐标
watermark_y: 20, // 水印起始位置Y轴坐标
watermark_x_space: 100, // 水印x轴间隔
watermark_y_space: 100, // 水印y轴间隔
watermark_font: '微软雅黑', // 水印字体
watermark_color: 'black', // 水印字体颜色
watermark_fontsize: '18px', // 水印字体大小
watermark_alpha: 0.08, // 水印透明度，要求设置在大于等于0.005
watermark_width: 200, // 水印宽度
watermark_height: 100, // 水印长度
watermark_angle: 15, // 水印倾斜度数
watermark_parent_width: 0, // 水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height: 0, // 水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node: null, // 水印插件挂载的父元素element,不输入则默认挂在body上
monitor: true // monitor 是否监控， true: 不可删除水印; false: 可删水印。