Watermark Service 水印服务

A lightweight and flexible DOM watermarking service for Vue 3 applications. Supports multi-line text, custom fonts, opacity, rotation, padding, and more.

一个轻量且灵活的 DOM 水印服务，适用于 Vue 3 项目。支持多行文本、自定义字体、透明度、旋转、间距等多种配置。

✨ Features 功能亮点

• Multi-line text watermark 多行文本水印
• Customizable font, size, color, opacity, rotation 自定义字体、大小、颜色、透明度与旋转角度
• Supports dynamic/reactive updates 支持动态响应式更新
• Non-intrusive (pointer-events: none) 不干扰页面交互
• API-based usage (no custom directives needed) 通过 API 调用，无需自定义指令

📦 Installation 安装

npm install watermark-service

🛠 Usage 使用方法

1. Basic Usage 基础用法

import { WatermarkServiceInstance } from 'watermark-service';

WatermarkServiceInstance.apply(document.body, {
  text: ['Confidential', 'Do Not Copy'],
  font: 'Arial',
  fontSize: 20,
  color: 'rgba(0,0,0,0.15)',
  rotate: -30,
  padding: 80,
});

2. Clear Watermark 清除水印

WatermarkServiceInstance.clear(document.body);

3. Reactive Binding 响应式绑定（配合 Vue Ref）

import { ref } from 'vue';
import { WatermarkServiceInstance } from 'watermark-service';

const watermarkOptions = ref({
  text: ['User: John Doe', 'Do Not Share'],
  fontSize: 18,
  color: '#ff0000',
  opacity: 0.2,
});

// Bind watermark 绑定水印
WatermarkServiceInstance.bindReactive(document.body, watermarkOptions);

// Dynamically update watermark 动态修改水印
watermarkOptions.value.text = ['Updated Watermark'];

📋 API 说明

WatermarkServiceInstance.apply(target: HTMLElement, options: WatermarkOptions)

Apply watermark to a DOM element. 将水印应用到指定 DOM 元素。

| Option 选项 | Type 类型 | Description 描述 | Default 默认值 | | ---------- | ---------- | --------------------------------------------------- | ----------- | | text | string[] | Watermark text (supports multiple lines) 水印文本（支持多行） | [] | | font | string | Font family 字体 | 'Arial' | | fontSize | number | Font size in pixels 字号（px） | 16 | | color | string | Font color (supports rgba/hex) 颜色 | '#000' | | opacity | number | Global opacity (0 ~ 1) 透明度 | 0.1 | | rotate | number | Rotation angle in degrees 旋转角度（°） | -30 | | lineHeight | number | Line height in pixels 行高（px） | 24 | | padding | number | Padding around the text 内边距 | 50 | | zIndex | number | Watermark layer z-index 层级 | 9999 |

WatermarkServiceInstance.clear(target: HTMLElement)

Removes watermark from the target element. 清除指定元素上的水印。

WatermarkServiceInstance.bindReactive(target: HTMLElement, config: Ref<WatermarkOptions>)

Binds watermark to a Vue Ref for reactive updates. 将水印绑定到 Vue 的 Ref，实现响应式更新。

返回：unwatch 函数，可用来停止监听。

📝 License 许可证

MIT License

📢 Author 作者

By th S — watermark-service

---

## 你需要：
1. 替换 `npm 包名` 为你真实的包名。
2. 把 `Author 链接` 换成你的 GitHub 主页或其他个人信息。

---

### 是否帮你写好 `package.json + README.md + build+publish 脚本` 一键项目骨架？  
（直接发一份完整能用的 npm 包项目结构）  
需要的话直接告诉我「帮我生成发布骨架」。