vue-watermark-plus

🛡️ vue-watermark-plus

一个高性能的 Vue2/Vue3 企业级水印工具，支持Canvas / SVG 双渲染引擎，零侵入一键使用，双重防篡改，让你的内容保护变得简单又高效。

✨ 特点

• 双模式渲染：Canvas 与 SVG 自由切换，SVG 矢量文字清晰，Canvas 兼容性好。
• 文字 + 图片水印：支持多行文本、自定义字体/颜色/大小，也支持上传 Logo 图片并控制缩放与间距。
• 防篡改监控：实时监听水印节点的删除与样式修改并自动恢复。可通过 monitor 选项自由开启/关闭，适应不同安全需求。
• 零侵入指令：通过 v-watermark 使用，不增加额外组件，不破坏现有布局。
• TypeScript 完备：完整的类型定义，配置清晰，开发体验极佳。
• 轻量高性能：仅生成一个背景单元图片并复用，内存与 DOM 开销极低。

🆚 与常见方案对比

📦 安装

npm install vue-watermark-plus
# 或
yarn add vue-watermark-plus
# 或
pnpm add vue-watermark-plus

🚀 快速上手

本插件同时支持 Vue 2 与 Vue 3

Vue 3 全局注册

// main.ts
import { createApp } from 'vue'
import VueWatermarkPlus from 'vue-watermark-plus'
import App from './App.vue'

const app = createApp(App)
app.use(VueWatermarkPlus)
app.mount('#app')

Vue 2 全局注册

// main.js
import Vue from 'vue'
import VueWatermarkPlus from 'vue-watermark-plus'
import App from './App.vue'

Vue.use(VueWatermarkPlus)

new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用指令

<template>
  <div
    v-watermark="{
      text: '仅供内部使用',
      opacity: 0.2,
      rotate: -20,
      density: 'medium',
      mode: 'svg'
    }"
  >
    <!-- 你的页面内容 -->
  </div>
</template>

局部注册（Vue 3）

<!-- 组件内按需引入，无需全局注册 -->
<script setup lang="ts">
  import { vWatermark } from 'vue-watermark-plus'
</script>
<template>
  <div
    v-watermark="{
      text: '仅供内部使用',
      opacity: 0.2,
      rotate: -20,
      density: 'medium',
      mode: 'svg'
    }"
  >
    <!-- 你的页面内容 -->
  </div>
</template>

局部注册（Vue 2）

<script>
import { vWatermarkVue2 } from 'vue-watermark-plus'

export default {
  directives: {
    watermark: vWatermarkVue2,
  },
}
</script>

<template>
  <div v-watermark="{ text: '仅供内部使用', opacity: 0.2 }">
    <!-- 你的页面内容 -->
  </div>
</template>

⚙️ 配置参数

🔧 进阶用法

1. 图片水印

import logoUrl from './assets/safe.png'

<div v-watermark="{
  image: logoUrl,
  opacity: 0.2,
  rotate: -10,
  gapX: 150,
  gapY: 100,
  imageWidth: 25
}">
  <h1>一行指令，即刻为您的页面穿上隐形防护衣</h1>
  <h1>无需额外组件</h1>
  <h1>不影响页面交互与性能</h1>
</div>

图片水印效果

2. 多行文本水印

<div v-watermark="{
  text: ['绝密文件', '仅供内部使用', '禁止外传'],
  opacity: 0.2,
  density: 'high'
}">
  <h1>一行指令，即刻为您的页面穿上隐形防护衣</h1>
  <h1>无需额外组件</h1>
  <h1>不影响页面交互与性能</h1>
</div>

多行文本水印效果

如果你在使用过程中遇到任何问题，欢迎提交 Issue。