Xiaohe / github@xiaohe0601 / gitee@xiaohe0601

🎉 Features

• 🪶 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

🚁 Installation

PNPM

pnpm add watermark-lite

YARN

yarn add watermark-lite

NPM

npm install watermark-lite

🛹 Usage

Basic Usage

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();

Default Instance

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"
});

Custom Watermark Style

wm.mount({
  text: "watermark text",
  fontSize: "14px",
  fontFamily: "inherit",
  color: "#000000",
  opacity: 0.15,
  rotate: 15
});

Custom Watermark Parent Element

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"
});

About Single-Page Applications

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();
});

Configuration Options

| 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 |

Type Definitions

See jsdocs.io

🐶 Discussion & Communication

• ❓：For questions or bug feedback, you can submit an issues and PRs are welcome~
• 📫：[email protected]
• 🐧：Not yet available

🏆 License

• MIT LICENSE