1.1.0 • Published 3 years ago

@gem-mine/watermark v1.1.0

Weekly downloads
3
License
-
Repository
-
Last release
3 years ago

✨ 特性

  • 🚀 小巧,不到 5K 大小,Gzip 压缩后不到 2K
  • 🌴 支持一个页面添加多处不同水印
  • 🐠 支持自定义水印样式,开箱即用
  • 🌈 安全防御 - 防止他人删除水印dom或修改样式属性
  • 💻 使用 TypeScript 编写,提供完善的类型定义
  • 📦 提供cjs、umd两种格式

🏗 安装

// npm
npm install @gem-mine/watermark --save

// yarn
yarn add @gem-mine/watermark

🚄 示例

Demo

🚗 框架封装

🔨 使用

import WaterMark from '@gem-mine/watermark';

const waterMark = new WaterMark();

// 修改水印配置
waterMark.update({ ... });

// 渲染水印
waterMark.render();

🐚 API

update(options);

修改水印配置

render()

渲染水印

水印配置参数

参数说明类型默认值版本
mode水印是重复排异还是间隔排列repeat | intervalrepeat1.2.0
monitor监听水印元素是否被篡改,被修改或者删除等操作,则重新渲染水印booleantrue--
container水印挂载的容器HTMLElement | stingbody
text水印文本string | string[]----
zIndex水印层级number9999
width单个水印区域宽度number160--
height单个水印区域高度number80--
opacity透明度number0.2--
rotate旋转的角度number20--
fontSize字体大小number14--
fontWeight字体粗细--normal--
fontColor字体颜色string#727071--
fontFamily规定字体系列stringsans-serif--
textAlign文本对齐设置stringcenter--

❤️ 感谢

🌟 社区互助

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