# vue3-watermark-plugin

**Repository Path**: wsqi/vue3-watermark-plugin

## Basic Information

- **Project Name**: vue3-watermark-plugin
- **Description**: A powerful Vue 3 watermark plugin with component and directive support
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-17
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Watermark Plugin

一个功能完整的 Vue 3 水印插件，支持指令和组件两种使用方式。

## 功能特性

- ✅ 支持自定义文本内容
- ✅ 支持字体大小设置
- ✅ 支持字体颜色设置
- ✅ 支持字体加粗
- ✅ 支持旋转角度设置
- ✅ 支持横向和纵向间距设置
- ✅ 防篡改保护（自动重新生成被删除的水印）
- ✅ 响应式更新
- ✅ TypeScript 支持
- ✅ 轻量级，无外部依赖

## 安装

```bash
npm install vue3-watermark-plugin
```

## 快速开始

### 1. 注册插件

```javascript
import { createApp } from "vue";
import App from "./App.vue";
import WatermarkPlugin from "vue3-watermark-plugin";

const app = createApp(App);
app.use(WatermarkPlugin);
app.mount("#app");
```

### 2. 按需引入

```javascript
import { WatermarkComponent, watermarkDirective } from "vue3-watermark-plugin";

// 注册组件
app.component("Watermark", WatermarkComponent);

// 注册指令
app.directive("watermark", watermarkDirective);
```

## 使用方式

### 指令形式（推荐）

```vue
<template>
  <!-- 基础使用 -->
  <div v-watermark="{ content: '机密文档' }">内容区域</div>

  <!-- 完整配置 -->
  <div v-watermark="watermarkConfig">内容区域</div>
</template>

<script setup>
import { reactive } from "vue";

const watermarkConfig = reactive({
  content: "机密文档", // 水印文本
  fontSize: 16, // 字体大小
  color: "rgba(255, 0, 0, 0.2)", // 字体颜色
  bold: false, // 是否加粗
  rotate: -20, // 旋转角度
  gapX: 120, // 横向间距
  gapY: 80, // 纵向间距
});
</script>
```

### 组件形式

```vue
<template>
  <Watermark
    content="内部资料"
    :fontSize="18"
    color="rgba(0, 0, 255, 0.15)"
    :bold="true"
    :rotate="15"
    :gapX="100"
    :gapY="100"
    :visible="showWatermark"
  >
    <div class="content">这里是需要添加水印的内容</div>
  </Watermark>
</template>

<script setup>
import { ref } from "vue";
import Watermark from "@/components/Watermark/index.vue";

const showWatermark = ref(true);
</script>
```

## 配置参数

| 参数     | 类型    | 默认值                | 说明                                   |
| -------- | ------- | --------------------- | -------------------------------------- |
| content  | String  | '水印文本'            | 水印显示的文本内容                     |
| fontSize | Number  | 16                    | 字体大小（px）                         |
| color    | String  | 'rgba(0, 0, 0, 0.15)' | 字体颜色，支持任何 CSS 颜色值          |
| bold     | Boolean | false                 | 是否加粗字体                           |
| rotate   | Number  | -20                   | 旋转角度（度），正数顺时针，负数逆时针 |
| gapX     | Number  | 100                   | 水印之间的横向间距（px）               |
| gapY     | Number  | 100                   | 水印之间的纵向间距（px）               |
| zIndex   | Number  | 9999                  | 水印层级                               |
| visible  | Boolean | true                  | 是否显示水印（仅组件形式支持）         |

## 高级用法

### 动态更新水印

```vue
<template>
  <div>
    <button @click="updateWatermark">更新水印</button>
    <div v-watermark="config" class="content">内容区域</div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const config = ref({
  content: "初始水印",
  fontSize: 16,
  color: "rgba(0, 0, 0, 0.15)",
});

const updateWatermark = () => {
  config.value = {
    content: "更新后的水印",
    fontSize: 20,
    color: "rgba(255, 0, 0, 0.3)",
  };
};
</script>
```

### 条件显示水印

```vue
<template>
  <div v-watermark="showWatermark ? watermarkConfig : null">内容区域</div>
</template>

<script setup>
import { ref, computed } from "vue";

const showWatermark = ref(true);
const watermarkConfig = computed(() =>
  showWatermark.value
    ? {
        content: "机密文档",
        fontSize: 16,
      }
    : null
);
</script>
```

## 注意事项

1. **性能优化**：水印使用 Canvas 生成，大量使用时注意性能
2. **防篡改**：插件内置防篡改机制，但不能防止禁用 JavaScript
3. **样式冲突**：确保容器元素有适当的定位（relative/absolute/fixed）
4. **响应式**：水印会自动适应容器大小变化

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 示例

查看 `demo.vue` 文件获取完整的使用示例。