npm package: @qiuye-zhou/web-water-mark
Description: 快捷的给网站添加自定义水印
Author: qiuye-zhou
Latest version: 1.0.4

# @qiuye-zhou/web-water-mark
快捷的给网站添加自定义水印

[![npm version](https://badge.fury.io/js/@qiuye-zhou/web-water-mark.svg)](https://badge.fury.io/js/@qiuye-zhou/web-water-mark)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 安装

```bash
npm install @qiuye-zhou/web-water-mark
```

使用yarn：

```bash
yarn add @qiuye-zhou/web-water-mark
```

使用 pnpm：

```bash
pnpm add @qiuye-zhou/web-water-mark
```

## 使用方法

### 基本用法

```js
import Watermark from '@qiuye-zhou/web-water-mark';

const watermark = new Watermark({
    container: document.body,
    content: '水印内容',
    x: 100,
    y: 100,
    color: 'red',
    opacity: 0.5,
    zIndex: 1000,
    rotate: -30,
    fontSize: 20,
    width: 250,
    height: 150,
});
watermark.output();
```

### 参数说明

```js
export interface config {
    container: HTMLElement, // 加水印的节点
    width?: number, // 单个水印的宽度
    height?: number, // 单个水印的高度
    fontSize?: number, // 字体大小
    font?: string, // 字体
    color?: string, // 字体颜色
    content: string, // 水印内容
    rotate?: number, // 旋转角度
    zIndex?: number, // 水印层次
    opacity?: number, // 水印透明度
    x?: number, // 水印位置
    y?: number, // 水印位置
    onWatermarkChanged?: Function // 水印修改回掉函数
}
```

### 在Vue中使用
```ts
<script setup lang="ts">
....
const elementRef = ref(null)
let watermark: Watermark | null = null
onMounted(() => {
  // 确保 elementRef.value 存在后再创建 Watermark 实例
  if (elementRef.value) {
    watermark = new Watermark({
      container: elementRef.value,
      content: `水印`,
      x: 100,
      y: 100,
      color: 'red',
      opacity: 0.3,
      zIndex: 1000,
      rotate: -30,
      fontSize: 20,
      width: 250,
      height: 150,
    })
    watermark.output()
  }
})

onUnmounted(() => {
  if (watermark) {
    watermark.destroy()
  }
})
</script>

<template>
    <div ref="elementRef">
    </div>
</template>
```

### 在React中使用

```tsx
import React, { useEffect, useRef } from 'react';
import Watermark from '@qiuye-zhou/web-water-mark';

const MyComponent: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const watermarkRef = useRef<Watermark | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      watermarkRef.current = new Watermark({
        container: containerRef.current,
        content: '水印内容',
        x: 100,
        y: 100,
        color: 'red',
        opacity: 0.3,
        zIndex: 1000,
        rotate: -30,
        fontSize: 20,
        width: 250,
        height: 150,
      });
      watermarkRef.current.output();
    }

    return () => {
      if (watermarkRef.current) {
        watermarkRef.current.destroy();
      }
    };
  }, []);

  return <div ref={containerRef}>内容区域</div>;
};

export default MyComponent;
```

## API

### Watermark类

#### 构造函数
```ts
new Watermark(config: config)
```

#### 方法

- `output()`: 显示水印
- `destroy()`: 销毁水印

## 开发

### 安装依赖
```bash
npm install
```

### 构建
```bash
npm run build
```

### 发布到npm
```bash
npm run publish:npm
```

## 许可证

MIT License