Xiaohe / github@xiaohe0601 / gitee@xiaohe0601
English | 简体中文
-
🪶 Lightweight and easy-to-use API design
-
🖌️ Rich customization options
-
🔐 Monitors DOM behavior and automatically rebuilds the watermark
-
🧀 Full support for TypeScript
-
👌 No framework restrictions
pnpm add watermark-lite
yarn add watermark-lite
npm install watermark-lite
import { Watermark } from "watermark-lite";
const wm = new Watermark();
// Display the watermark
wm.mount({
text: "watermark text"
});
// To modify the watermark text or style, just call the `mount` method again
wm.mount({
text: "modified watermark text"
});
// Remove the watermark
wm.unmount();
Since version 0.0.7
, you can directly use the exported default instance
import { watermark } from "watermark-lite";
watermark.mount({
text: "watermark text"
});
You can also use the alias wm
for watermark
import { wm } from "watermark-lite";
wm.mount({
text: "watermark text"
});
wm.mount({
text: "watermark text",
fontSize: "14px",
fontFamily: "inherit",
color: "#000000",
opacity: 0.15,
rotate: 15
});
By default, the watermark is mounted under document.body
. You can change the parent element using the parentEl
parameter, which supports passing in an element id or HTMLElement
wm.mount({
text: "watermark text",
parentEl: "app"
});
For single-page applications, make sure to call the unmount
method at the appropriate time
to avoid repeated listeners and potential memory leaks
// The following is an example using Vue3, but the plugin itself is not limited to any framework
import { onBeforeUnmount, onMounted } from "vue";
import { Watermark } from "watermark-lite";
const wm = new Watermark();
onMounted(() => {
wm.mount({
text: "watermark text"
});
});
onBeforeUnmount(() => {
wm.unmount();
});
Parameter | Description | Type | Default |
---|---|---|---|
el | watermark element id | string | watermark |
text | watermark text | string | default watermark |
x | watermark starting x-coordinate (px) | number | 0 |
y | watermark starting y-coordinate (px) | number | 0 |
rows | number of watermark rows | number | auto-calculated |
cols | number of watermark columns | number | auto-calculated |
xGap | watermark x-axis spacing (px) | number | 50 |
yGap | watermark y-axis spacing (px) | number | 50 |
zIndex | z-index of the watermark |
number / string | 99999 |
itemIdPrefix | prefix for watermark item ids | string | watermark-item |
itemWidth | width of the watermark item (px) | number | 100 |
itemHeight | height of the watermark item (px) | number | 100 |
fontSize | watermark font size | string | 14px |
fontFamily | watermark font | string | inherit |
color | watermark text color | string | #000000 |
opacity | watermark opacity (range: 0 ~ 1 ) |
number | 0.15 |
rotate 0.1.0 |
watermark rotate (range: 0 ~ 360 ) |
number | 15 |
parentEl | parent element for watermark | string / HTMLElement |
document.body |
monitor | monitor watermark changes and automatically rebuild | boolean | true |
angle 0.1.0 removed |
watermark rotate (range: 0 ~ 360 ) (removed in 0.1.0 , use rotate instead) |
number | 15 |
See jsdocs.io
- ❓:For questions or bug feedback, you can submit an issues and PRs are welcome~
- 📫:xiaohe0601@outlook.com
- 🐧:Not yet available
- MIT LICENSE