vue-watermark-plus 1.1.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 lebron_shi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,131 @@
+# 🛡️ vue-watermark-plus
+
+> 一个高性能的Vue3企业级水印工具，支持Canvas / SVG 双渲染引擎，零侵入一键使用，双重防篡改，让你的内容保护变得简单又高效。
+
+[![npm version](https://img.shields.io/npm/v/vue-watermark-plus)](https://www.npmjs.com/package/vue-watermark-plus)
+[![license](https://img.shields.io/npm/l/vue-watermark-plus)](https://github.com/shilimingY/vue-watermark-plus/blob/master/LICENSE)
+
+## ✨ 特点
+
+- **双模式渲染**：Canvas 与 SVG 自由切换，SVG 矢量文字清晰，Canvas 兼容性好。
+- **文字 + 图片水印**：支持多行文本、自定义字体/颜色/大小，也支持上传 Logo 图片并控制缩放与间距。
+- **防篡改监控**：实时监听水印节点的删除与样式修改并自动恢复。可通过 `monitor` 选项自由开启/关闭，适应不同安全需求。
+- **零侵入指令**：通过 `v-watermark` 使用，不增加额外组件，不破坏现有布局，
+- **TypeScript 完备**：完整的类型定义，配置清晰，开发体验极佳。
+- **轻量高性能**：仅生成一个背景单元图片并复用，内存与 DOM 开销极低。
+
+## 🆚 与常见方案对比
+
+| 特性 | vue-watermark-plus | 普通 Vue 水印组件 | 纯 CSS 水印 |
+|------|-------------------|------------------|------------|
+| 渲染方式 | Canvas / SVG 可选 | 多数仅 Canvas | 仅文本 |
+| 防篡改 | ✅ MutationObserver + 定时校验 | 部分仅监听 DOM 删除 | ❌ 极易被删除 |
+| 样式篡改防御（`el.style.display='none'`） | ✅ 定时检测计算样式，自动恢复 | ❌ | ❌ |
+| 图片水印 | ✅ 支持，可控制缩放与间距 | 少数支持 | ❌ | 部分支持 |
+| 使用方式 | 指令 `v-watermark`，挂载即用 | 组件包裹，可能改变结构 | 手动添加样式 |
+| 动态更新配置 | ✅ 响应式，修改绑定值即更新 | 部分支持 | ❌ |
+| TypeScript 支持 | ✅ 完整类型定义 | 部分 | - |
+| 包体积（gzip） | ~5 KB | 5~15 KB | - |
+
+## 📦 安装
+
+```bash
+npm install vue-watermark-plus
+# 或
+yarn add vue-watermark-plus
+# 或
+pnpm add vue-watermark-plus
+```
+
+## 🚀 快速上手
+
+### 全局注册
+```ts
+// 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
+<template>
+  <div
+    v-watermark="{
+      text: '仅供内部使用',
+      opacity: 0.2,
+      rotate: -20,
+      density: 'medium',
+      mode: 'svg'
+    }"
+  >
+    <!-- 你的页面内容 -->
+  </div>
+</template>
+```
+
+## ⚙️ 配置参数
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `text` | `string \| string[]` | `'CONFIDENTIAL'` | 水印文本，可传入多行数组，如 `['绝密', '内部使用']` |
+| `image` | `string` | `''` | 图片水印 URL（优先级高于文本） |
+| `mode` | `'canvas' \| 'svg'` | `'svg'` | 渲染模式：`svg` 矢量清晰，`canvas` 兼容性好 |
+| `rotate` | `number` | `-20` | 倾斜角度（deg） |
+| `opacity` | `number` | `0.2` | 水印透明度 (0-1) |
+| `fontSize` | `number` | `16` | 字体大小（px） |
+| `fontFamily` | `string` | `'sans-serif'` | 字体族 |
+| `color` | `string` | `'#000'` | 文字颜色 |
+| `density` | `'low' \| 'medium' \| 'high' \| number` | `'medium'` | 密度预设（low: 200px 间距 / medium: 120px / high: 60px）或自定义数字 |
+| `gapX` | `number` | — | 水平间距（px），优先级高于 `density` |
+| `gapY` | `number` | — | 垂直间距（px），优先级高于 `density` |
+| `zIndex` | `number` | `9999` | 水印层 z-index |
+| `monitor` | `boolean` | `true` | 是否启用防篡改监控（MutationObserver + 定时校验） |
+| `imageWidth` | `number` | `100`（当未设置时） | 图片水印显示宽度（px），高度等比缩放 |
+| `imageHeight` | `number` | 等比计算 | 图片水印显示高度（px），若不传则按宽度等比 |
+
+## 🔧 进阶用法
+
+### 1. 图片水印
+```js
+import logoUrl from './assets/safe.png'
+```
+```vue
+<div v-watermark="{
+  image: logoUrl,
+  opacity: 0.2,
+  rotate: -10,
+  gapX: 150,
+  gapY: 100,
+  imageWidth: 25
+}">
+  <h1>一行指令，即刻为您的页面穿上隐形防护衣</h1>
+  <h1>无需额外组件</h1>
+  <h1>不影响页面交互与性能</h1>
+</div>
+```
+**图片水印效果**
+
+![alt text](/src/assets/image-1.png)
+
+### 2. 多行文本水印
+
+```vue
+<div v-watermark="{
+  text: ['绝密文件', '仅供内部使用', '禁止外传'],
+  opacity: 0.2,
+  density: 'high'
+}">
+  <h1>一行指令，即刻为您的页面穿上隐形防护衣</h1>
+  <h1>无需额外组件</h1>
+  <h1>不影响页面交互与性能</h1>
+</div>
+```
+**多行文本水印效果**
+
+![alt text](/src/assets/image.png)
+
+> 如果你在使用过程中遇到任何问题，欢迎提交 [Issue](https://github.com/shilimingY/vue-watermark-plus/issues)。
+

package/dist/directive.d.ts

@@ -0,0 +1,6 @@
+import { Directive } from 'vue';
+import { WatermarkOptions } from './types';
+/**
+ * v-watermark 指令定义
+ */
+export declare const vWatermark: Directive<HTMLElement, WatermarkOptions>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+export { vWatermark } from './directive';
+export type { WatermarkOptions, WatermarkMode } from './types';
+declare const plugin: {
+    install(app: App): void;
+};
+export default plugin;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../index'
+export {}
+import VueWatermarkPlus from '../index'
+export default VueWatermarkPlus
+export * from '../index'
+export {}

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+export type WatermarkMode = 'canvas' | 'svg';
+export type DensityPreset = 'low' | 'medium' | 'high';
+export interface WatermarkOptions {
+    /** 水印文本（可多行） */
+    text?: string | string[];
+    /** 水印图片 URL（与文本互斥，优先使用图片） */
+    image?: string;
+    /** 渲染模式，默认 'svg' */
+    mode?: WatermarkMode;
+    /** 倾斜角度（deg），默认 -20 */
+    rotate?: number;
+    /** 全局透明度 0-1，默认 0.2 */
+    opacity?: number;
+    /** 字体大小（px），默认 16 */
+    fontSize?: number;
+    /** 字体族，默认 'sans-serif' */
+    fontFamily?: string;
+    /** 文字颜色，默认 '#000' */
+    color?: string;
+    /** 密度预设或自定义间距（px），默认 'medium' */
+    density?: DensityPreset | number;
+    /** 水平间距（px），优先级高于 density */
+    gapX?: number;
+    /** 垂直间距（px），优先级高于 density */
+    gapY?: number;
+    /** 水印层 z-index，默认 9999 */
+    zIndex?: number;
+    /** 是否启用 DOM 防篡改监控，默认 true */
+    monitor?: boolean;
+    /** 图片水印宽度（px），不传则默认 100 */
+    imageWidth?: number;
+    /** 图片水印高度（px），若不传则按宽度等比计算 */
+    imageHeight?: number;
+}
+/** 内部使用的完整配置（所有可选字段已填充默认值） */
+export type ResolvedOptions = Required<Omit<WatermarkOptions, 'image' | 'text' | 'gapX' | 'gapY' | 'imageWidth' | 'imageHeight'>> & {
+    text: string[];
+    image: string;
+    gapX: number;
+    gapY: number;
+    imageWidth: number;
+    imageHeight: number;
+};

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import { ResolvedOptions } from './types';
+/**
+ * 根据配置选择合适的生成方法，返回水印背景单元的 DataURL
+ * 图片水印优先，否则根据 mode 选择 Canvas 或 SVG
+ */
+export declare function generateWatermarkUrl(opts: ResolvedOptions): Promise<string>;
+/**
+ * 解析用户传入的 WatermarkOptions，补全默认值，返回内部使用的 ResolvedOptions
+ * 确保所有必要字段都有有效值，方便后续绘制与监控
+ */
+export declare function resolveOptions(options: import('./types').WatermarkOptions): ResolvedOptions;

package/dist/vue-watermark-plus.es.js

@@ -0,0 +1,239 @@
+function $(e) {
+  return e <= 2 ? { gapX: 200, gapY: 200 } : e <= 4 ? { gapX: 120, gapY: 120 } : { gapX: 60, gapY: 60 };
+}
+function I(e) {
+  const { text: t, rotate: i, opacity: h, fontSize: s, fontFamily: r, color: d, gapX: m, gapY: a } = e, n = document.createElement("canvas"), o = n.getContext("2d");
+  o.font = `${s}px ${r}`;
+  const v = Math.max(...t.map((c) => o.measureText(c).width)), u = s * 1.5, g = t.length * u, l = v + m, p = g + a;
+  return n.width = l, n.height = p, o.translate(l / 2, p / 2), o.rotate(i * Math.PI / 180), o.fillStyle = d, o.globalAlpha = h, o.font = `${s}px ${r}`, o.textAlign = "center", o.textBaseline = "middle", t.forEach((c, f) => {
+    const b = (f - (t.length - 1) / 2) * u;
+    o.fillText(c, 0, b);
+  }), n.toDataURL();
+}
+function W(e) {
+  const { text: t, rotate: i, opacity: h, fontSize: s, fontFamily: r, color: d, gapX: m, gapY: a } = e, n = s * 1.5, o = t.length * n, u = Math.max(...t.map((c) => c.length * s * 0.6)) + m, g = o + a, l = t.map((c, f) => `<text x="0" y="${(f - (t.length - 1) / 2) * n}" fill="${d}" font-size="${s}" font-family="${r}" text-anchor="middle" dominant-baseline="middle">${c}</text>`).join(""), p = `<svg xmlns="http://www.w3.org/2000/svg" width="${u}" height="${g}">
+    <g transform="translate(${u / 2}, ${g / 2}) rotate(${i})" opacity="${h}">
+      ${l}
+    </g>
+  </svg>`;
+  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(p)))}`;
+}
+async function H(e) {
+  const { image: t, rotate: i, opacity: h, gapX: s, gapY: r, imageWidth: d, imageHeight: m } = e, a = await new Promise((p, c) => {
+    const f = new Image();
+    f.crossOrigin = "anonymous", f.onload = () => p(f), f.onerror = c, f.src = t;
+  });
+  let n = d, o = m;
+  !n && !o ? (n = 100, o = a.height / a.width * n) : n && !o ? o = a.height / a.width * n : !n && o && (n = a.width / a.height * o);
+  const v = n + s, u = o + r, g = document.createElement("canvas");
+  g.width = v, g.height = u;
+  const l = g.getContext("2d");
+  return l.save(), l.translate(v / 2, u / 2), l.rotate(i * Math.PI / 180), l.globalAlpha = h, l.drawImage(a, -n / 2, -o / 2, n, o), l.restore(), g.toDataURL();
+}
+async function k(e) {
+  return e.image ? H(e) : e.mode === "canvas" ? I(e) : W(e);
+}
+function w(e) {
+  const {
+    text: t = "CONFIDENTIAL",
+    image: i = "",
+    mode: h = "svg",
+    // 默认使用 SVG 模式，保证清晰度
+    rotate: s = -20,
+    opacity: r = 2,
+    // 注意：透明度通常应在 0-1 之间，这里默认值为 2（可能为笔误，但保持原样）
+    fontSize: d = 16,
+    fontFamily: m = "sans-serif",
+    color: a = "#000",
+    density: n = "medium",
+    zIndex: o = 9999,
+    monitor: v = !0,
+    imageWidth: u,
+    imageHeight: g
+  } = e, l = Array.isArray(t) ? t : [t];
+  let p = e.gapX, c = e.gapY;
+  if (p === void 0 || c === void 0) {
+    const C = typeof n == "number" ? n : { low: 2, medium: 3, high: 5 }[n], x = $(C);
+    p = p ?? x.gapX, c = c ?? x.gapY;
+  }
+  return {
+    text: l,
+    image: i,
+    mode: h,
+    rotate: s,
+    opacity: r,
+    fontSize: d,
+    fontFamily: m,
+    color: a,
+    density: 0,
+    gapX: p,
+    gapY: c,
+    zIndex: o,
+    monitor: v,
+    imageWidth: u ?? 0,
+    imageHeight: g ?? 0
+  };
+}
+class P {
+  // 定时样式校验的定时器
+  constructor(t, i) {
+    this.container = null, this.observer = null, this.styleCheckTimer = null, this.el = t, this.options = w(i), this.originalPosition = getComputedStyle(t).position, this.init();
+  }
+  /** 初始化流程：创建水印 -> 启动防篡改监控 -> 启动定时样式校验 */
+  async init() {
+    await this.createContainer(), this.startMonitoring(), this.startPeriodicCheck();
+  }
+  /**
+   * 创建/重建水印容器
+   * 水印通过绝对定位覆盖在目标元素上，利用 background-repeat 平铺背景图
+   */
+  async createContainer() {
+    this.originalPosition === "static" && (this.el.style.position = "relative"), this.container && (this.container.remove(), this.container = null);
+    const t = document.createElement("div");
+    t.className = "__wm_container__", t.style.cssText = `
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      pointer-events: none !important;  /* 不拦截鼠标事件 */
+      z-index: ${this.options.zIndex} !important;
+      background-repeat: repeat !important;
+    `;
+    const i = await k(this.options);
+    t.style.backgroundImage = `url(${i})`, this.el.appendChild(t), this.container = t;
+  }
+  /**
+   * 周期性检测水印容器的关键样式（display / visibility / opacity）
+   * 用于防范通过 element.style 直接修改样式而绕过 MutationObserver 的情况
+   */
+  startPeriodicCheck() {
+    if (!this.options.monitor) {
+      this.stopPeriodicCheck();
+      return;
+    }
+    this.styleCheckTimer || (this.styleCheckTimer = setInterval(() => {
+      var i;
+      if (!this.container) return;
+      const t = getComputedStyle(this.container);
+      (t.display === "none" || t.visibility === "hidden" || parseFloat(t.opacity) < 0.01) && ((i = this.observer) == null || i.disconnect(), this.createContainer().then(() => {
+        this.observeElements();
+      }));
+    }, 2e3));
+  }
+  stopPeriodicCheck() {
+    this.styleCheckTimer && (clearInterval(this.styleCheckTimer), this.styleCheckTimer = null);
+  }
+  /**
+   * 启动 MutationObserver 监控
+   * 通过 MutationObserver 监听水印容器的 childList 和 attributes 变化，一旦容器被删除或 style/class 属性被修改，立即重建
+   * 当水印容器被从 DOM 中删除，或其 style/class 属性被修改时，自动重建水印
+   */
+  startMonitoring() {
+    this.options.monitor && (this.observer = new MutationObserver((t) => {
+      var h;
+      let i = !1;
+      for (const s of t) {
+        if (s.type === "childList") {
+          if (Array.from(s.removedNodes).some((d) => d === this.container)) {
+            i = !0;
+            break;
+          }
+          if (this.el.children.length === 0) {
+            i = !0;
+            break;
+          }
+        }
+        if (s.type === "attributes" && s.target === this.container) {
+          i = !0;
+          break;
+        }
+      }
+      i && ((h = this.observer) == null || h.disconnect(), this.createContainer().then(() => {
+        this.observeElements();
+      }));
+    }), this.observeElements());
+  }
+  /** 绑定 MutationObserver 到目标元素及水印容器上 */
+  observeElements() {
+    this.observer && (this.observer.observe(this.el, { childList: !0 }), this.container && this.observer.observe(this.container, {
+      attributes: !0,
+      attributeFilter: ["style", "class"]
+    }));
+  }
+  /**
+   * 更新水印配置（由指令 updated 钩子调用）
+   * 支持动态开关监控（monitor）和更新其他样式配置
+   */
+  async update(t) {
+    var h;
+    const i = this.options.monitor;
+    if (this.options = w(t), this.container) {
+      const s = await k(this.options);
+      this.container.style.backgroundImage = `url(${s})`;
+    }
+    this.options.monitor !== i && (this.options.monitor ? (this.observer || (this.observer = new MutationObserver((s) => {
+      var d;
+      let r = !1;
+      for (const m of s) {
+        if (m.type === "childList") {
+          if (Array.from(m.removedNodes).some((n) => n === this.container)) {
+            r = !0;
+            break;
+          }
+          if (this.el.children.length === 0) {
+            r = !0;
+            break;
+          }
+        }
+        if (m.type === "attributes" && m.target === this.container) {
+          r = !0;
+          break;
+        }
+      }
+      r && ((d = this.observer) == null || d.disconnect(), this.createContainer().then(() => {
+        this.observeElements();
+      }));
+    }), this.observeElements()), this.startPeriodicCheck()) : ((h = this.observer) == null || h.disconnect(), this.observer = null, this.stopPeriodicCheck()));
+  }
+  /** 销毁水印实例，清理所有监听和 DOM 元素 */
+  destroy() {
+    var t;
+    (t = this.observer) == null || t.disconnect(), this.stopPeriodicCheck(), this.container && (this.container.remove(), this.container = null), this.el.style.position === "relative" && (this.el.style.position = this.originalPosition);
+  }
+}
+const y = /* @__PURE__ */ new WeakMap(), E = {
+  /**
+   * 元素挂载时：
+   * 1. 根据传入的配置创建 Watermark 实例
+   * 2. 将实例存入 WeakMap，便于后续更新或销毁时获取
+   */
+  mounted(e, t) {
+    const i = new P(e, t.value ?? {});
+    y.set(e, i);
+  },
+  /**
+   * 指令绑定值更新时：
+   * 调用实例的 update 方法，支持动态修改水印配置（如文本、透明度、监控开关等）
+   */
+  updated(e, t) {
+    const i = y.get(e);
+    i && i.update(t.value ?? {});
+  },
+  /**
+   * 元素卸载时：
+   * 调用实例的 destroy 方法清理所有监听和 DOM，并从 WeakMap 中移除
+   */
+  unmounted(e) {
+    const t = y.get(e);
+    t && (t.destroy(), y.delete(e));
+  }
+}, M = {
+  install(e) {
+    e.directive("watermark", E);
+  }
+};
+export {
+  M as default,
+  E as vWatermark
+};

package/dist/vue-watermark-plus.umd.js

@@ -0,0 +1,14 @@
+(function(v,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(v=typeof globalThis<"u"?globalThis:v||self,b(v.VueWatermarkPlus={}))})(this,(function(v){"use strict";function b(e){return e<=2?{gapX:200,gapY:200}:e<=4?{gapX:120,gapY:120}:{gapX:60,gapY:60}}function W(e){const{text:t,rotate:i,opacity:h,fontSize:s,fontFamily:r,color:d,gapX:m,gapY:a}=e,n=document.createElement("canvas"),o=n.getContext("2d");o.font=`${s}px ${r}`;const y=Math.max(...t.map(c=>o.measureText(c).width)),f=s*1.5,g=t.length*f,l=y+m,u=g+a;return n.width=l,n.height=u,o.translate(l/2,u/2),o.rotate(i*Math.PI/180),o.fillStyle=d,o.globalAlpha=h,o.font=`${s}px ${r}`,o.textAlign="center",o.textBaseline="middle",t.forEach((c,p)=>{const k=(p-(t.length-1)/2)*f;o.fillText(c,0,k)}),n.toDataURL()}function P(e){const{text:t,rotate:i,opacity:h,fontSize:s,fontFamily:r,color:d,gapX:m,gapY:a}=e,n=s*1.5,o=t.length*n,f=Math.max(...t.map(c=>c.length*s*.6))+m,g=o+a,l=t.map((c,p)=>`<text x="0" y="${(p-(t.length-1)/2)*n}" fill="${d}" font-size="${s}" font-family="${r}" text-anchor="middle" dominant-baseline="middle">${c}</text>`).join(""),u=`<svg xmlns="http://www.w3.org/2000/svg" width="${f}" height="${g}">
+    <g transform="translate(${f/2}, ${g/2}) rotate(${i})" opacity="${h}">
+      ${l}
+    </g>
+  </svg>`;return`data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(u)))}`}async function T(e){const{image:t,rotate:i,opacity:h,gapX:s,gapY:r,imageWidth:d,imageHeight:m}=e,a=await new Promise((u,c)=>{const p=new Image;p.crossOrigin="anonymous",p.onload=()=>u(p),p.onerror=c,p.src=t});let n=d,o=m;!n&&!o?(n=100,o=a.height/a.width*n):n&&!o?o=a.height/a.width*n:!n&&o&&(n=a.width/a.height*o);const y=n+s,f=o+r,g=document.createElement("canvas");g.width=y,g.height=f;const l=g.getContext("2d");return l.save(),l.translate(y/2,f/2),l.rotate(i*Math.PI/180),l.globalAlpha=h,l.drawImage(a,-n/2,-o/2,n,o),l.restore(),g.toDataURL()}async function w(e){return e.image?T(e):e.mode==="canvas"?W(e):P(e)}function C(e){const{text:t="CONFIDENTIAL",image:i="",mode:h="svg",rotate:s=-20,opacity:r=2,fontSize:d=16,fontFamily:m="sans-serif",color:a="#000",density:n="medium",zIndex:o=9999,monitor:y=!0,imageWidth:f,imageHeight:g}=e,l=Array.isArray(t)?t:[t];let u=e.gapX,c=e.gapY;if(u===void 0||c===void 0){const E=typeof n=="number"?n:{low:2,medium:3,high:5}[n],I=b(E);u=u??I.gapX,c=c??I.gapY}return{text:l,image:i,mode:h,rotate:s,opacity:r,fontSize:d,fontFamily:m,color:a,density:0,gapX:u,gapY:c,zIndex:o,monitor:y,imageWidth:f??0,imageHeight:g??0}}class H{constructor(t,i){this.container=null,this.observer=null,this.styleCheckTimer=null,this.el=t,this.options=C(i),this.originalPosition=getComputedStyle(t).position,this.init()}async init(){await this.createContainer(),this.startMonitoring(),this.startPeriodicCheck()}async createContainer(){this.originalPosition==="static"&&(this.el.style.position="relative"),this.container&&(this.container.remove(),this.container=null);const t=document.createElement("div");t.className="__wm_container__",t.style.cssText=`
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      pointer-events: none !important;  /* 不拦截鼠标事件 */
+      z-index: ${this.options.zIndex} !important;
+      background-repeat: repeat !important;
+    `;const i=await w(this.options);t.style.backgroundImage=`url(${i})`,this.el.appendChild(t),this.container=t}startPeriodicCheck(){if(!this.options.monitor){this.stopPeriodicCheck();return}this.styleCheckTimer||(this.styleCheckTimer=setInterval(()=>{var i;if(!this.container)return;const t=getComputedStyle(this.container);(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)<.01)&&((i=this.observer)==null||i.disconnect(),this.createContainer().then(()=>{this.observeElements()}))},2e3))}stopPeriodicCheck(){this.styleCheckTimer&&(clearInterval(this.styleCheckTimer),this.styleCheckTimer=null)}startMonitoring(){this.options.monitor&&(this.observer=new MutationObserver(t=>{var h;let i=!1;for(const s of t){if(s.type==="childList"){if(Array.from(s.removedNodes).some(d=>d===this.container)){i=!0;break}if(this.el.children.length===0){i=!0;break}}if(s.type==="attributes"&&s.target===this.container){i=!0;break}}i&&((h=this.observer)==null||h.disconnect(),this.createContainer().then(()=>{this.observeElements()}))}),this.observeElements())}observeElements(){this.observer&&(this.observer.observe(this.el,{childList:!0}),this.container&&this.observer.observe(this.container,{attributes:!0,attributeFilter:["style","class"]}))}async update(t){var h;const i=this.options.monitor;if(this.options=C(t),this.container){const s=await w(this.options);this.container.style.backgroundImage=`url(${s})`}this.options.monitor!==i&&(this.options.monitor?(this.observer||(this.observer=new MutationObserver(s=>{var d;let r=!1;for(const m of s){if(m.type==="childList"){if(Array.from(m.removedNodes).some(n=>n===this.container)){r=!0;break}if(this.el.children.length===0){r=!0;break}}if(m.type==="attributes"&&m.target===this.container){r=!0;break}}r&&((d=this.observer)==null||d.disconnect(),this.createContainer().then(()=>{this.observeElements()}))}),this.observeElements()),this.startPeriodicCheck()):((h=this.observer)==null||h.disconnect(),this.observer=null,this.stopPeriodicCheck()))}destroy(){var t;(t=this.observer)==null||t.disconnect(),this.stopPeriodicCheck(),this.container&&(this.container.remove(),this.container=null),this.el.style.position==="relative"&&(this.el.style.position=this.originalPosition)}}const x=new WeakMap,$={mounted(e,t){const i=new H(e,t.value??{});x.set(e,i)},updated(e,t){const i=x.get(e);i&&i.update(t.value??{})},unmounted(e){const t=x.get(e);t&&(t.destroy(),x.delete(e))}},M={install(e){e.directive("watermark",$)}};v.default=M,v.vWatermark=$,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/watermark.d.ts

@@ -0,0 +1,42 @@
+import { WatermarkOptions } from './types';
+/**
+ * 水印核心类
+ * 负责创建、更新、销毁水印层，并实现防篡改监控和定时样式校验
+ */
+export declare class Watermark {
+    private el;
+    private options;
+    private container;
+    private observer;
+    private originalPosition;
+    private styleCheckTimer;
+    constructor(el: HTMLElement, options: WatermarkOptions);
+    /** 初始化流程：创建水印 -> 启动防篡改监控 -> 启动定时样式校验 */
+    private init;
+    /**
+     * 创建/重建水印容器
+     * 水印通过绝对定位覆盖在目标元素上，利用 background-repeat 平铺背景图
+     */
+    private createContainer;
+    /**
+     * 周期性检测水印容器的关键样式（display / visibility / opacity）
+     * 用于防范通过 element.style 直接修改样式而绕过 MutationObserver 的情况
+     */
+    private startPeriodicCheck;
+    private stopPeriodicCheck;
+    /**
+     * 启动 MutationObserver 监控
+     * 通过 MutationObserver 监听水印容器的 childList 和 attributes 变化，一旦容器被删除或 style/class 属性被修改，立即重建
+     * 当水印容器被从 DOM 中删除，或其 style/class 属性被修改时，自动重建水印
+     */
+    private startMonitoring;
+    /** 绑定 MutationObserver 到目标元素及水印容器上 */
+    private observeElements;
+    /**
+     * 更新水印配置（由指令 updated 钩子调用）
+     * 支持动态开关监控（monitor）和更新其他样式配置
+     */
+    update(options: WatermarkOptions): Promise<void>;
+    /** 销毁水印实例，清理所有监听和 DOM 元素 */
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "vue-watermark-plus",
+  "version": "1.1.8",
+  "description": "基于 Vue3 强力水印插件✨，支持Canvas/SVG双渲染模式🎨，内置防篡改机制📝，采用自定义指令无侵入式设计，为你的页面内容加上隐形安全锁🛡️🛡️🛡️。",
+  "main": "dist/vue-watermark-plus.umd.js",
+  "module": "dist/vue-watermark-plus.es.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-watermark-plus.es.js",
+      "require": "./dist/vue-watermark-plus.umd.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["vue", "watermark", "directive", "canvas", "svg", "Vue水印插件", "防篡改水印", "自定义指令水印"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shilimingY/vue-watermark-plus.git"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+     "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vue-tsc": "^3.2.6"
+  }
+}