1.1.0 • Published 3 years ago
@gem-mine/watermark v1.1.0
✨ 特性
- 🚀 小巧,不到 5K 大小,Gzip 压缩后不到 2K
- 🌴 支持一个页面添加多处不同水印
- 🐠 支持自定义水印样式,开箱即用
- 🌈 安全防御 - 防止他人删除水印dom或修改样式属性
- 💻 使用 TypeScript 编写,提供完善的类型定义
- 📦 提供cjs、umd两种格式
🏗 安装
// npm
npm install @gem-mine/watermark --save
// yarn
yarn add @gem-mine/watermark
🚄 示例
🚗 框架封装
- React @pansy/react-watermark
🔨 使用
import WaterMark from '@gem-mine/watermark';
const waterMark = new WaterMark();
// 修改水印配置
waterMark.update({ ... });
// 渲染水印
waterMark.render();
🐚 API
update(options);
修改水印配置
render()
渲染水印
水印配置参数
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
mode | 水印是重复排异还是间隔排列 | repeat | interval | repeat | 1.2.0 |
monitor | 监听水印元素是否被篡改,被修改或者删除等操作,则重新渲染水印 | boolean | true | -- |
container | 水印挂载的容器 | HTMLElement | sting | body | |
text | 水印文本 | string | string[] | -- | -- |
zIndex | 水印层级 | number | 9999 | |
width | 单个水印区域宽度 | number | 160 | -- |
height | 单个水印区域高度 | number | 80 | -- |
opacity | 透明度 | number | 0.2 | -- |
rotate | 旋转的角度 | number | 20 | -- |
fontSize | 字体大小 | number | 14 | -- |
fontWeight | 字体粗细 | -- | normal | -- |
fontColor | 字体颜色 | string | #727071 | -- |
fontFamily | 规定字体系列 | string | sans-serif | -- |
textAlign | 文本对齐设置 | string | center | -- |
❤️ 感谢
🌟 社区互助
Github Issue | 钉钉群 | 微信群 |
---|---|---|
issues |
1.1.0
3 years ago
1.0.0-beta.1
3 years ago
1.0.0-beta.0
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago