w-vue3-watermark 1.0.18 → 1.0.19

package/package.json

@@ -1,16 +1,16 @@
-{
-  "name": "w-vue3-watermark",
-  "version": "1.0.18",
-  "description": "vue3 水印组件",
-  "main": "watermark.common.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "vue3",
-    "watermark"
-  ],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs"
-}
+{
+  "name": "w-vue3-watermark",
+  "version": "1.0.19",
+  "description": "vue3 水印组件",
+  "main": "watermark.common.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vue3",
+    "watermark"
+  ],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/watermark.es.js

@@ -0,0 +1,132 @@
+import { computed, createElementBlock, defineComponent, onMounted, openBlock, ref, renderSlot, watch } from "vue";
+function useWatermarkBg(t) {
+	function n(e, t) {
+		if (!Array.isArray(e) || e.length === 0) return {
+			longestText: "",
+			maxWidth: 0
+		};
+		if (typeof e == "string") return {
+			longestText: e,
+			maxWidth: t.measureText(e).width
+		};
+		let n = e[0], r = t.measureText(n).width;
+		for (let i = 1; i < e.length; i++) {
+			let a = e[i], o = t.measureText(a).width;
+			o > r && (r = o, n = a);
+		}
+		return {
+			longestText: n,
+			maxWidth: r
+		};
+	}
+	return computed(() => {
+		let e = document.createElement("canvas"), r = window.devicePixelRatio || 1, i = t.waterFontSize * r, a = `${t.waterFontWeight} ${i}px ${t.waterFontFamily}`, o = e.getContext("2d"), s = t.waterGap * r;
+		o.font = a;
+		let { maxWidth: c } = n(t.waterName, o), l = c, u = Array.isArray(t.waterName) ? (t.waterName.length - 1) * (i + 6 * r) + i : i, d = Math.max(100, Math.sqrt(l ** 2 + u ** 2)) + s * 2;
+		e.width = d, e.height = d, o.clearRect(0, 0, e.width, e.height), o.font = a, o.fillStyle = t.waterFontColor, o.textAlign = t.waterTextAlign, o.textBaseline = "middle", o.shadowColor = t.shadowColor, o.shadowOffsetX = t.shadowOffsetX, o.shadowOffsetY = t.shadowOffsetY, o.shadowBlur = t.shadowBlur;
+		let f = s;
+		return o.translate(f, e.height / 2), o.rotate(Math.PI / 180 * -t.waterRotate), Array.isArray(t.waterName) ? t.waterName.forEach((e, t) => {
+			let n = i + 6 * r;
+			o.fillText(e, 0, t * n);
+		}) : o.fillText(t.waterName, 0, 0), {
+			base64: e.toDataURL(),
+			size: d,
+			styleSize: d / r
+		};
+	});
+}
+var components = [/* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		waterName: {
+			type: [String, Array],
+			required: !0,
+			default: "watermark"
+		},
+		waterFontSize: {
+			type: Number,
+			default: 20
+		},
+		waterFontWeight: {
+			type: Number,
+			default: 700
+		},
+		waterGap: {
+			type: Number,
+			default: 100
+		},
+		waterRotate: {
+			type: Number,
+			default: 20
+		},
+		waterFontFamily: {
+			type: String,
+			default: "Microsoft Yahei"
+		},
+		waterTextAlign: {
+			type: String,
+			default: "left"
+		},
+		waterFontColor: {
+			type: String,
+			default: "rgba(255, 255, 255, 1)"
+		},
+		shadowColor: {
+			type: String,
+			default: "rgba(61, 61, 61, 0.25)"
+		},
+		shadowOffsetX: {
+			type: Number,
+			default: 1.5
+		},
+		shadowOffsetY: {
+			type: Number,
+			default: 1.5
+		},
+		shadowBlur: {
+			type: Number,
+			default: 0
+		}
+	},
+	setup(e) {
+		let n = e, l = ref(), u = ref(), d = ref(), f = ref(), p = ref(), m = useWatermarkBg(n);
+		f.value = m.value.base64, p.value = m.value.styleSize, watch(n, (e) => {
+			let t = useWatermarkBg(e);
+			f.value = t.value.base64, p.value = t.value.styleSize, document.querySelectorAll(".w-water-mask-bg").forEach((e) => {
+				e.remove();
+			}), h();
+		}, { deep: !0 }), onMounted(() => {
+			h(), d.value = new MutationObserver((e) => {
+				for (let t of e) {
+					for (let e of t.removedNodes) if (e === u.value) {
+						u.value?.remove(), h();
+						return;
+					}
+					if (t.target === u.value) {
+						u.value.remove(), h();
+						return;
+					}
+				}
+			}), d.value?.observe(l.value, {
+				childList: !0,
+				attributes: !0,
+				subtree: !0
+			});
+		});
+		let h = () => {
+			u.value = document.createElement("div"), u.value.style.backgroundImage = `url(${f.value})`, u.value.classList.add("w-water-mask-bg"), u.value.style.inset = 0, u.value.style.zIndex = 9999, u.value.style.position = "absolute", u.value.style.backgroundRepeat = "repeat", u.value.style.backgroundSize = `${p.value}px ${p.value}px`, u.value.style.pointerEvents = "none", l.value?.appendChild(u.value);
+		};
+		return (e, n) => (openBlock(), createElementBlock("div", {
+			class: "watermark-container",
+			ref_key: "watermarkContainer",
+			ref: l
+		}, [renderSlot(e.$slots, "default")], 512));
+	}
+})], packages_default = function(e) {
+	components.forEach((t) => {
+		e.component(t.name, t);
+	});
+};
+export { packages_default as default };
+
+//# sourceMappingURL=watermark.es.js.map

package/watermark.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.es.js","names":["watermark"],"sources":["../../src/packages/water-mark/useWatermarkBg.ts","../../src/packages/water-mark/index.vue","../../src/packages/water-mark/index.vue","../../src/packages/index.js"],"sourcesContent":["import { computed } from 'vue'\r\n\r\ntype Props = {\r\n  waterName: string | string[]\r\n  waterFontSize: number\r\n  waterFontWeight: number\r\n  waterGap: number\r\n  waterRotate: number\r\n  waterFontFamily: string\r\n  waterTextAlign: string\r\n  waterFontColor: string\r\n  shadowColor: string\r\n  shadowOffsetX: number\r\n  shadowOffsetY: number\r\n  shadowBlur: number\r\n}\r\n\r\nexport default function useWatermarkBg(props: Props) {\r\n  // 获取数组中宽度最长的文本和对应的最大宽度\r\n  function getLongestTextByWidth(textArr: string | string[], ctx: CanvasRenderingContext2D) {\r\n    // 边界处理：空数组直接返回空结果\r\n    if (!Array.isArray(textArr) || textArr.length === 0) {\r\n      return {\r\n        longestText: '',\r\n        maxWidth: 0,\r\n      }\r\n    }\r\n\r\n    // 字符串直接返回宽度\r\n    if (typeof textArr === 'string') {\r\n      return {\r\n        longestText: textArr,\r\n        maxWidth: ctx.measureText(textArr).width,\r\n      }\r\n    }\r\n\r\n    // 初始化变量：记录最长文本和最大宽度\r\n    let longestText = textArr[0]\r\n    let maxWidth = ctx.measureText(longestText as string).width\r\n\r\n    // 遍历数组，逐个测量并比较宽度\r\n    for (let i = 1; i < textArr.length; i++) {\r\n      const currentText = textArr[i]\r\n      const currentWidth = ctx.measureText(currentText as string).width\r\n\r\n      if (currentWidth > maxWidth) {\r\n        maxWidth = currentWidth\r\n        longestText = currentText\r\n      }\r\n    }\r\n\r\n    return {\r\n      longestText,\r\n      maxWidth,\r\n    }\r\n  }\r\n\r\n  return computed(() => {\r\n    const canvas = document.createElement('canvas')\r\n    const devicePixelRatio = window.devicePixelRatio || 1\r\n    const fontSize = props.waterFontSize * devicePixelRatio\r\n    const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`\r\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D\r\n    const waterGap = props.waterGap * devicePixelRatio // 统一缓存适配后的间距\r\n\r\n    // 第一步：先设置字体，测量文字最大宽度\r\n    ctx.font = font\r\n    const { maxWidth } = getLongestTextByWidth(props.waterName, ctx)\r\n\r\n    // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n    // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n    const textTotalWidth = maxWidth // 文字原始最大宽度\r\n    const textTotalHeight = Array.isArray(props.waterName)\r\n      ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize\r\n      : fontSize // 文字整体高度（多行文适配）\r\n    // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n    const baseCanvasSize =\r\n      Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2\r\n    canvas.width = baseCanvasSize\r\n    canvas.height = baseCanvasSize\r\n\r\n    // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n    ctx.font = font\r\n    ctx.fillStyle = props.waterFontColor\r\n    // @ts-ignore\r\n    ctx.textAlign = props.waterTextAlign\r\n    ctx.textBaseline = 'middle'\r\n    ctx.shadowColor = props.shadowColor\r\n    ctx.shadowOffsetX = props.shadowOffsetX\r\n    ctx.shadowOffsetY = props.shadowOffsetY\r\n    ctx.shadowBlur = props.shadowBlur\r\n\r\n    // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n    // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n    // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n    const safeOffset = waterGap // 安全偏移量（最小必要，兼顾上下左右）\r\n    ctx.translate(safeOffset, canvas.height / 2) // 水平仅偏移安全间距，垂直居中\r\n\r\n    // 旋转水印（保持原有配置，无过度偏移）\r\n    ctx.rotate((Math.PI / 180) * -props.waterRotate)\r\n\r\n    // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n    if (Array.isArray(props.waterName)) {\r\n      props.waterName.forEach((item, index) => {\r\n        // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n        const verticalGap = fontSize + 6 * devicePixelRatio\r\n        // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出\r\n        ctx.fillText(item, 0, index * verticalGap)\r\n      })\r\n    } else {\r\n      // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n      ctx.fillText(props.waterName, 0, 0)\r\n    }\r\n\r\n    // 返回水印信息\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: baseCanvasSize,\r\n      styleSize: baseCanvasSize / devicePixelRatio,\r\n    }\r\n  })\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport { onMounted, ref, watch } from 'vue'\r\nimport useWatermarkBg from './useWatermarkBg'\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array] as unknown as () => string | string[],\r\n    required: true,\r\n    default: 'watermark',\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: 'Microsoft Yahei',\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: 'left',\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: 'rgba(255, 255, 255, 1)', // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: 'rgba(61, 61, 61, 0.25)',\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n})\r\n\r\nconst watermarkContainer = ref<HTMLElement>() // 挂载的dom节点\r\nconst div = ref<HTMLElement>() // 水印节点\r\nconst k = ref<MutationObserver>() // 监听器\r\nconst base64 = ref<string>() // base64\r\nconst styleSize = ref<number>() // styleSize\r\nconst bg = useWatermarkBg(props) // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(\r\n  props,\r\n  (val) => {\r\n    const bg = useWatermarkBg(val) // 水印参数\r\n    base64.value = bg.value.base64\r\n    styleSize.value = bg.value.styleSize\r\n    // 删除w-water-mask-bg class\r\n    document.querySelectorAll('.w-water-mask-bg').forEach((item) => {\r\n      item.remove()\r\n    })\r\n    // 重新添加水印\r\n    addDom()\r\n  },\r\n  {\r\n    deep: true,\r\n  },\r\n)\r\n\r\nonMounted(() => {\r\n  addDom()\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value?.remove()\r\n          addDom()\r\n          return\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove()\r\n        addDom()\r\n        return\r\n      }\r\n    }\r\n  })\r\n  k.value?.observe(watermarkContainer.value as HTMLElement, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  })\r\n})\r\nconst addDom = () => {\r\n  div.value = document.createElement('div')\r\n  div.value.style.backgroundImage = `url(${base64.value})`\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  // @ts-ignore\r\n  div.value.style.inset = 0\r\n  // @ts-ignore\r\n  div.value.style.zIndex = 9999\r\n  div.value.style.position = 'absolute'\r\n  div.value.style.backgroundRepeat = 'repeat'\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`\r\n  div.value.style.pointerEvents = 'none'\r\n  watermarkContainer.value?.appendChild(div.value)\r\n}\r\n</script>\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport { onMounted, ref, watch } from 'vue'\r\nimport useWatermarkBg from './useWatermarkBg'\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array] as unknown as () => string | string[],\r\n    required: true,\r\n    default: 'watermark',\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: 'Microsoft Yahei',\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: 'left',\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: 'rgba(255, 255, 255, 1)', // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: 'rgba(61, 61, 61, 0.25)',\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n})\r\n\r\nconst watermarkContainer = ref<HTMLElement>() // 挂载的dom节点\r\nconst div = ref<HTMLElement>() // 水印节点\r\nconst k = ref<MutationObserver>() // 监听器\r\nconst base64 = ref<string>() // base64\r\nconst styleSize = ref<number>() // styleSize\r\nconst bg = useWatermarkBg(props) // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(\r\n  props,\r\n  (val) => {\r\n    const bg = useWatermarkBg(val) // 水印参数\r\n    base64.value = bg.value.base64\r\n    styleSize.value = bg.value.styleSize\r\n    // 删除w-water-mask-bg class\r\n    document.querySelectorAll('.w-water-mask-bg').forEach((item) => {\r\n      item.remove()\r\n    })\r\n    // 重新添加水印\r\n    addDom()\r\n  },\r\n  {\r\n    deep: true,\r\n  },\r\n)\r\n\r\nonMounted(() => {\r\n  addDom()\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value?.remove()\r\n          addDom()\r\n          return\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove()\r\n        addDom()\r\n        return\r\n      }\r\n    }\r\n  })\r\n  k.value?.observe(watermarkContainer.value as HTMLElement, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  })\r\n})\r\nconst addDom = () => {\r\n  div.value = document.createElement('div')\r\n  div.value.style.backgroundImage = `url(${base64.value})`\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  // @ts-ignore\r\n  div.value.style.inset = 0\r\n  // @ts-ignore\r\n  div.value.style.zIndex = 9999\r\n  div.value.style.position = 'absolute'\r\n  div.value.style.backgroundRepeat = 'repeat'\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`\r\n  div.value.style.pointerEvents = 'none'\r\n  watermarkContainer.value?.appendChild(div.value)\r\n}\r\n</script>\r\n","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;"],"mappings":"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"}

package/watermark.umd.js

@@ -1,389 +1,2 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("vue"));
-	else if(typeof define === 'function' && define.amd)
-		define([], factory);
-	else if(typeof exports === 'object')
-		exports["watermark"] = factory(require("vue"));
-	else
-		root["watermark"] = factory(root["Vue"]);
-})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {
-return /******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
-
-/***/ 274:
-/***/ (function(module) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE__274__;
-
-/***/ })
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	!function() {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = function(exports, definition) {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/publicPath */
-/******/ 	!function() {
-/******/ 		__webpack_require__.p = "";
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-!function() {
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": function() { return /* binding */ entry_lib; }
-});
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
-/* eslint-disable no-var */
-// This file is imported into lib/wc client bundles.
-
-if (typeof window !== 'undefined') {
-  var currentScript = window.document.currentScript
-  if (false) { var getCurrentScript; }
-
-  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
-  if (src) {
-    __webpack_require__.p = src[1] // eslint-disable-line
-  }
-}
-
-// Indicate to webpack that this file can be concatenated
-/* harmony default export */ var setPublicPath = (null);
-
-// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(274);
-;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
-
-function useWatermarkBg(props) {
-  // 获取数组中宽度最长的文本和对应的最大宽度
-  function getLongestTextByWidth(textArr, ctx) {
-    // 边界处理：空数组直接返回空结果
-    if (!Array.isArray(textArr) || textArr.length === 0) {
-      return {
-        longestText: '',
-        maxWidth: 0
-      };
-    }
-
-    // 字符串直接返回宽度
-    if (typeof textArr === 'string') {
-      return {
-        longestText: textArr,
-        maxWidth: ctx.measureText(textArr).width
-      };
-    }
-
-    // 初始化变量：记录最长文本和最大宽度
-    let longestText = textArr[0];
-    let maxWidth = ctx.measureText(longestText).width;
-
-    // 遍历数组，逐个测量并比较宽度
-    for (let i = 1; i < textArr.length; i++) {
-      const currentText = textArr[i];
-      const currentWidth = ctx.measureText(currentText).width;
-      if (currentWidth > maxWidth) {
-        maxWidth = currentWidth;
-        longestText = currentText;
-      }
-    }
-    return {
-      longestText,
-      maxWidth
-    };
-  }
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-    const canvas = document.createElement('canvas');
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const fontSize = props.waterFontSize * devicePixelRatio;
-    const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`;
-    const ctx = canvas.getContext('2d');
-    const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距
-
-    // 第一步：先设置字体，测量文字最大宽度
-    ctx.font = font;
-    const {
-      maxWidth
-    } = getLongestTextByWidth(props.waterName, ctx);
-
-    // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）
-    // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸
-    const textTotalWidth = maxWidth; // 文字原始最大宽度
-    const textTotalHeight = Array.isArray(props.waterName) ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize : fontSize; // 文字整体高度（多行文适配）
-    // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）
-    const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2;
-    canvas.width = baseCanvasSize;
-    canvas.height = baseCanvasSize;
-
-    // 第三步：重置上下文，配置样式（保持原有功能不变）
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.font = font;
-    ctx.fillStyle = props.waterFontColor;
-    ctx.textAlign = props.waterTextAlign;
-    ctx.textBaseline = 'middle';
-    ctx.shadowColor = props.shadowColor;
-    ctx.shadowOffsetX = props.shadowOffsetX;
-    ctx.shadowOffsetY = props.shadowOffsetY;
-    ctx.shadowBlur = props.shadowBlur;
-
-    // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）
-    // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡
-    // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间
-    const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）
-    ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中
-
-    // 旋转水印（保持原有配置，无过度偏移）
-    ctx.rotate(Math.PI / 180 * -props.waterRotate);
-
-    // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）
-    if (Array.isArray(props.waterName)) {
-      props.waterName.forEach((item, index) => {
-        // 垂直间距：适配设备像素比，保持原有排版逻辑
-        const verticalGap = fontSize + 6 * devicePixelRatio;
-        // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出
-        ctx.fillText(item, 0, index * verticalGap);
-      });
-    } else {
-      // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取
-      ctx.fillText(props.waterName, 0, 0);
-    }
-
-    // 返回水印信息
-    return {
-      base64: canvas.toDataURL(),
-      size: baseCanvasSize,
-      styleSize: baseCanvasSize / devicePixelRatio
-    };
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
-
-
-
-const __default__ = {
-  name: 'watermark'
-};
-/* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
-  props: {
-    waterName: {
-      // 传入水印的文本
-      type: [String, Array],
-      required: true,
-      default: "watermark"
-    },
-    waterFontSize: {
-      // 字体的大小
-      type: Number,
-      default: 20
-    },
-    waterFontWeight: {
-      // 字体的粗细
-      type: Number,
-      default: 700
-    },
-    waterGap: {
-      // 水印重复的间隔
-      type: Number,
-      default: 100
-    },
-    waterRotate: {
-      // 水印倾斜
-      type: Number,
-      default: 20
-    },
-    waterFontFamily: {
-      // 水印字体
-      type: String,
-      default: "Microsoft Yahei"
-    },
-    waterTextAlign: {
-      // 水印对齐方式
-      type: String,
-      default: "left"
-    },
-    waterFontColor: {
-      // 水印字体颜色
-      type: String,
-      default: "rgba(255, 255, 255, 1)" // rgba(255, 255, 255, 0.2)
-    },
-    shadowColor: {
-      // 阴影颜色
-      type: String,
-      default: "rgba(61, 61, 61, 0.25)"
-    },
-    shadowOffsetX: {
-      // 阴影水平偏移
-      type: Number,
-      default: 1.5
-    },
-    shadowOffsetY: {
-      // 阴影垂直偏移
-      type: Number,
-      default: 1.5
-    },
-    shadowBlur: {
-      // 阴影模糊半径
-      type: Number,
-      default: 0
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 挂载的dom节点
-    const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 水印节点
-    const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 监听器
-    const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // base64
-    const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // styleSize
-    const bg = useWatermarkBg(props); // 水印参数
-    base64.value = bg.value.base64;
-    styleSize.value = bg.value.styleSize;
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(props, val => {
-      const bg = useWatermarkBg(val); // 水印参数
-      base64.value = bg.value.base64;
-      styleSize.value = bg.value.styleSize;
-      // 删除w-water-mask-bg class
-      document.querySelectorAll('.w-water-mask-bg').forEach(item => {
-        item.remove();
-      });
-      // 重新添加水印
-      addDom();
-    }, {
-      deep: true
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      addDom();
-
-      // 添加dom监控器
-      k.value = new MutationObserver(records => {
-        for (const record of records) {
-          for (const dom of record.removedNodes) {
-            if (dom === div.value) {
-              div.value.remove();
-              addDom();
-              return;
-            }
-          }
-          if (record.target === div.value) {
-            div.value.remove();
-            addDom();
-            return;
-          }
-        }
-      });
-      k.value.observe(watermarkContainer.value, {
-        childList: true,
-        attributes: true,
-        subtree: true
-      });
-    });
-    const addDom = () => {
-      div.value = document.createElement("div");
-      div.value.style.backgroundImage = `url(${base64.value})`;
-      // 添加个class
-      div.value.classList.add('w-water-mask-bg');
-      div.value.style.inset = 0;
-      div.value.style.zIndex = 9999;
-      div.value.style.position = "absolute";
-      div.value.style.backgroundRepeat = "repeat";
-      div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
-      div.value.style.pointerEvents = "none";
-      watermarkContainer.value.appendChild(div.value);
-    };
-    return (_ctx, _cache) => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
-        class: "watermark-container",
-        ref_key: "watermarkContainer",
-        ref: watermarkContainer
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default")], 512);
-    };
-  }
-}));
-;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
- 
-;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
-
-
-
-const __exports__ = water_markvue_type_script_setup_true_lang_js;
-
-/* harmony default export */ var water_mark = (__exports__);
-;// CONCATENATED MODULE: ./src/packages/index.js
-
-const components = [water_mark];
-
-// 注册组件
-const install = function (Vue) {
-  components.forEach(k => {
-    Vue.component(k.name, k);
-  });
-};
-/* harmony default export */ var src_packages = (install);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
-
-
-/* harmony default export */ var entry_lib = (src_packages);
-
-
-}();
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t(require(`vue`)):typeof define==`function`&&define.amd?define([`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,e.Watermark=t(e.Vue))})(this,function(e){function t(t){function n(e,t){if(!Array.isArray(e)||e.length===0)return{longestText:``,maxWidth:0};if(typeof e==`string`)return{longestText:e,maxWidth:t.measureText(e).width};let n=e[0],r=t.measureText(n).width;for(let i=1;i<e.length;i++){let a=e[i],o=t.measureText(a).width;o>r&&(r=o,n=a)}return{longestText:n,maxWidth:r}}return(0,e.computed)(()=>{let e=document.createElement(`canvas`),r=window.devicePixelRatio||1,i=t.waterFontSize*r,a=`${t.waterFontWeight} ${i}px ${t.waterFontFamily}`,o=e.getContext(`2d`),s=t.waterGap*r;o.font=a;let{maxWidth:c}=n(t.waterName,o),l=c,u=Array.isArray(t.waterName)?(t.waterName.length-1)*(i+6*r)+i:i,d=Math.max(100,Math.sqrt(l**2+u**2))+s*2;e.width=d,e.height=d,o.clearRect(0,0,e.width,e.height),o.font=a,o.fillStyle=t.waterFontColor,o.textAlign=t.waterTextAlign,o.textBaseline=`middle`,o.shadowColor=t.shadowColor,o.shadowOffsetX=t.shadowOffsetX,o.shadowOffsetY=t.shadowOffsetY,o.shadowBlur=t.shadowBlur;let f=s;return o.translate(f,e.height/2),o.rotate(Math.PI/180*-t.waterRotate),Array.isArray(t.waterName)?t.waterName.forEach((e,t)=>{let n=i+6*r;o.fillText(e,0,t*n)}):o.fillText(t.waterName,0,0),{base64:e.toDataURL(),size:d,styleSize:d/r}})}var n=[(0,e.defineComponent)({__name:`index`,props:{waterName:{type:[String,Array],required:!0,default:`watermark`},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:100},waterRotate:{type:Number,default:20},waterFontFamily:{type:String,default:`Microsoft Yahei`},waterTextAlign:{type:String,default:`left`},waterFontColor:{type:String,default:`rgba(255, 255, 255, 1)`},shadowColor:{type:String,default:`rgba(61, 61, 61, 0.25)`},shadowOffsetX:{type:Number,default:1.5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(n){let r=n,i=(0,e.ref)(),a=(0,e.ref)(),o=(0,e.ref)(),s=(0,e.ref)(),c=(0,e.ref)(),l=t(r);s.value=l.value.base64,c.value=l.value.styleSize,(0,e.watch)(r,e=>{let n=t(e);s.value=n.value.base64,c.value=n.value.styleSize,document.querySelectorAll(`.w-water-mask-bg`).forEach(e=>{e.remove()}),u()},{deep:!0}),(0,e.onMounted)(()=>{u(),o.value=new MutationObserver(e=>{for(let t of e){for(let e of t.removedNodes)if(e===a.value){a.value?.remove(),u();return}if(t.target===a.value){a.value.remove(),u();return}}}),o.value?.observe(i.value,{childList:!0,attributes:!0,subtree:!0})});let u=()=>{a.value=document.createElement(`div`),a.value.style.backgroundImage=`url(${s.value})`,a.value.classList.add(`w-water-mask-bg`),a.value.style.inset=0,a.value.style.zIndex=9999,a.value.style.position=`absolute`,a.value.style.backgroundRepeat=`repeat`,a.value.style.backgroundSize=`${c.value}px ${c.value}px`,a.value.style.pointerEvents=`none`,i.value?.appendChild(a.value)};return(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`watermark-container`,ref_key:`watermarkContainer`,ref:i},[(0,e.renderSlot)(t.$slots,`default`)],512))}})];return function(e){n.forEach(t=>{e.component(t.name,t)})}});
 //# sourceMappingURL=watermark.umd.js.map

package/watermark.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.umd.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?e25b","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\n\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n        // 边界处理：空数组直接返回空结果\r\n        if (!Array.isArray(textArr) || textArr.length === 0) {\r\n            return {\r\n                longestText: '',\r\n                maxWidth: 0\r\n            };\r\n        }\r\n\r\n        // 字符串直接返回宽度\r\n        if (typeof textArr === 'string') {\r\n            return {\r\n                longestText: textArr,\r\n                maxWidth: ctx.measureText(textArr).width\r\n            };\r\n        }\r\n\r\n        // 初始化变量：记录最长文本和最大宽度\r\n        let longestText = textArr[0];\r\n        let maxWidth = ctx.measureText(longestText).width;\r\n\r\n        // 遍历数组，逐个测量并比较宽度\r\n        for (let i = 1; i < textArr.length; i++) {\r\n            const currentText = textArr[i];\r\n            const currentWidth = ctx.measureText(currentText).width;\r\n\r\n            if (currentWidth > maxWidth) {\r\n                maxWidth = currentWidth;\r\n                longestText = currentText;\r\n            }\r\n        }\r\n\r\n        return {\r\n            longestText,\r\n            maxWidth\r\n        };\r\n    }\r\n\r\n    return computed(() => {\r\n        const canvas = document.createElement('canvas');\r\n        const devicePixelRatio = window.devicePixelRatio || 1;\r\n        const fontSize = props.waterFontSize * devicePixelRatio;\r\n        const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`;\r\n        const ctx = canvas.getContext('2d');\r\n        const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n        // 第一步：先设置字体，测量文字最大宽度\r\n        ctx.font = font;\r\n        const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n        // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n        // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n        const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n        const textTotalHeight = Array.isArray(props.waterName) \r\n            ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n            : fontSize; // 文字整体高度（多行文适配）\r\n        // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n        const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2;\r\n        canvas.width = baseCanvasSize;\r\n        canvas.height = baseCanvasSize;\r\n\r\n        // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        ctx.font = font;\r\n        ctx.fillStyle = props.waterFontColor;\r\n        ctx.textAlign = props.waterTextAlign;\r\n        ctx.textBaseline = 'middle';\r\n        ctx.shadowColor = props.shadowColor;\r\n        ctx.shadowOffsetX = props.shadowOffsetX;\r\n        ctx.shadowOffsetY = props.shadowOffsetY;\r\n        ctx.shadowBlur = props.shadowBlur;\r\n\r\n        // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n        // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n        // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n        const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n        ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n        // 旋转水印（保持原有配置，无过度偏移）\r\n        ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n        // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n        if (Array.isArray(props.waterName)) {\r\n            props.waterName.forEach((item, index) => {\r\n                // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n                const verticalGap = fontSize + 6 * devicePixelRatio;\r\n                // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出\r\n                ctx.fillText(item, 0, index * verticalGap);\r\n            });\r\n        } else {\r\n            // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n            ctx.fillText(props.waterName, 0, 0);\r\n        }\r\n\r\n        // 返回水印信息\r\n        return {\r\n            base64: canvas.toDataURL(),\r\n            size: baseCanvasSize,\r\n            styleSize: baseCanvasSize / devicePixelRatio,\r\n        };\r\n    });\r\n}","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref, watch } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: \"left\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n  const bg = useWatermarkBg(val); // 水印参数\r\n  base64.value = bg.value.base64\r\n  styleSize.value = bg.value.styleSize\r\n  // 删除w-water-mask-bg class\r\n  document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n    item.remove();\r\n  })\r\n  // 重新添加水印\r\n  addDom();\r\n},{\r\n  deep: true\r\n})\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64.value})`;\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","onMounted","ref","watch","__default__","name","__props","watermarkContainer","div","k","bg","value","val","querySelectorAll","remove","addDom","deep","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}
+{"version":3,"file":"watermark.umd.js","names":["watermark"],"sources":["../../src/packages/water-mark/useWatermarkBg.ts","../../src/packages/water-mark/index.vue","../../src/packages/water-mark/index.vue","../../src/packages/index.js"],"sourcesContent":["import { computed } from 'vue'\r\n\r\ntype Props = {\r\n  waterName: string | string[]\r\n  waterFontSize: number\r\n  waterFontWeight: number\r\n  waterGap: number\r\n  waterRotate: number\r\n  waterFontFamily: string\r\n  waterTextAlign: string\r\n  waterFontColor: string\r\n  shadowColor: string\r\n  shadowOffsetX: number\r\n  shadowOffsetY: number\r\n  shadowBlur: number\r\n}\r\n\r\nexport default function useWatermarkBg(props: Props) {\r\n  // 获取数组中宽度最长的文本和对应的最大宽度\r\n  function getLongestTextByWidth(textArr: string | string[], ctx: CanvasRenderingContext2D) {\r\n    // 边界处理：空数组直接返回空结果\r\n    if (!Array.isArray(textArr) || textArr.length === 0) {\r\n      return {\r\n        longestText: '',\r\n        maxWidth: 0,\r\n      }\r\n    }\r\n\r\n    // 字符串直接返回宽度\r\n    if (typeof textArr === 'string') {\r\n      return {\r\n        longestText: textArr,\r\n        maxWidth: ctx.measureText(textArr).width,\r\n      }\r\n    }\r\n\r\n    // 初始化变量：记录最长文本和最大宽度\r\n    let longestText = textArr[0]\r\n    let maxWidth = ctx.measureText(longestText as string).width\r\n\r\n    // 遍历数组，逐个测量并比较宽度\r\n    for (let i = 1; i < textArr.length; i++) {\r\n      const currentText = textArr[i]\r\n      const currentWidth = ctx.measureText(currentText as string).width\r\n\r\n      if (currentWidth > maxWidth) {\r\n        maxWidth = currentWidth\r\n        longestText = currentText\r\n      }\r\n    }\r\n\r\n    return {\r\n      longestText,\r\n      maxWidth,\r\n    }\r\n  }\r\n\r\n  return computed(() => {\r\n    const canvas = document.createElement('canvas')\r\n    const devicePixelRatio = window.devicePixelRatio || 1\r\n    const fontSize = props.waterFontSize * devicePixelRatio\r\n    const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`\r\n    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D\r\n    const waterGap = props.waterGap * devicePixelRatio // 统一缓存适配后的间距\r\n\r\n    // 第一步：先设置字体，测量文字最大宽度\r\n    ctx.font = font\r\n    const { maxWidth } = getLongestTextByWidth(props.waterName, ctx)\r\n\r\n    // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n    // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n    const textTotalWidth = maxWidth // 文字原始最大宽度\r\n    const textTotalHeight = Array.isArray(props.waterName)\r\n      ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize\r\n      : fontSize // 文字整体高度（多行文适配）\r\n    // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n    const baseCanvasSize =\r\n      Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2\r\n    canvas.width = baseCanvasSize\r\n    canvas.height = baseCanvasSize\r\n\r\n    // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n    ctx.clearRect(0, 0, canvas.width, canvas.height)\r\n    ctx.font = font\r\n    ctx.fillStyle = props.waterFontColor\r\n    // @ts-ignore\r\n    ctx.textAlign = props.waterTextAlign\r\n    ctx.textBaseline = 'middle'\r\n    ctx.shadowColor = props.shadowColor\r\n    ctx.shadowOffsetX = props.shadowOffsetX\r\n    ctx.shadowOffsetY = props.shadowOffsetY\r\n    ctx.shadowBlur = props.shadowBlur\r\n\r\n    // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n    // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n    // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n    const safeOffset = waterGap // 安全偏移量（最小必要，兼顾上下左右）\r\n    ctx.translate(safeOffset, canvas.height / 2) // 水平仅偏移安全间距，垂直居中\r\n\r\n    // 旋转水印（保持原有配置，无过度偏移）\r\n    ctx.rotate((Math.PI / 180) * -props.waterRotate)\r\n\r\n    // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n    if (Array.isArray(props.waterName)) {\r\n      props.waterName.forEach((item, index) => {\r\n        // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n        const verticalGap = fontSize + 6 * devicePixelRatio\r\n        // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出\r\n        ctx.fillText(item, 0, index * verticalGap)\r\n      })\r\n    } else {\r\n      // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n      ctx.fillText(props.waterName, 0, 0)\r\n    }\r\n\r\n    // 返回水印信息\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: baseCanvasSize,\r\n      styleSize: baseCanvasSize / devicePixelRatio,\r\n    }\r\n  })\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport { onMounted, ref, watch } from 'vue'\r\nimport useWatermarkBg from './useWatermarkBg'\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array] as unknown as () => string | string[],\r\n    required: true,\r\n    default: 'watermark',\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: 'Microsoft Yahei',\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: 'left',\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: 'rgba(255, 255, 255, 1)', // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: 'rgba(61, 61, 61, 0.25)',\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n})\r\n\r\nconst watermarkContainer = ref<HTMLElement>() // 挂载的dom节点\r\nconst div = ref<HTMLElement>() // 水印节点\r\nconst k = ref<MutationObserver>() // 监听器\r\nconst base64 = ref<string>() // base64\r\nconst styleSize = ref<number>() // styleSize\r\nconst bg = useWatermarkBg(props) // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(\r\n  props,\r\n  (val) => {\r\n    const bg = useWatermarkBg(val) // 水印参数\r\n    base64.value = bg.value.base64\r\n    styleSize.value = bg.value.styleSize\r\n    // 删除w-water-mask-bg class\r\n    document.querySelectorAll('.w-water-mask-bg').forEach((item) => {\r\n      item.remove()\r\n    })\r\n    // 重新添加水印\r\n    addDom()\r\n  },\r\n  {\r\n    deep: true,\r\n  },\r\n)\r\n\r\nonMounted(() => {\r\n  addDom()\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value?.remove()\r\n          addDom()\r\n          return\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove()\r\n        addDom()\r\n        return\r\n      }\r\n    }\r\n  })\r\n  k.value?.observe(watermarkContainer.value as HTMLElement, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  })\r\n})\r\nconst addDom = () => {\r\n  div.value = document.createElement('div')\r\n  div.value.style.backgroundImage = `url(${base64.value})`\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  // @ts-ignore\r\n  div.value.style.inset = 0\r\n  // @ts-ignore\r\n  div.value.style.zIndex = 9999\r\n  div.value.style.position = 'absolute'\r\n  div.value.style.backgroundRepeat = 'repeat'\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`\r\n  div.value.style.pointerEvents = 'none'\r\n  watermarkContainer.value?.appendChild(div.value)\r\n}\r\n</script>\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport { onMounted, ref, watch } from 'vue'\r\nimport useWatermarkBg from './useWatermarkBg'\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array] as unknown as () => string | string[],\r\n    required: true,\r\n    default: 'watermark',\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: 'Microsoft Yahei',\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: 'left',\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: 'rgba(255, 255, 255, 1)', // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: 'rgba(61, 61, 61, 0.25)',\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n})\r\n\r\nconst watermarkContainer = ref<HTMLElement>() // 挂载的dom节点\r\nconst div = ref<HTMLElement>() // 水印节点\r\nconst k = ref<MutationObserver>() // 监听器\r\nconst base64 = ref<string>() // base64\r\nconst styleSize = ref<number>() // styleSize\r\nconst bg = useWatermarkBg(props) // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(\r\n  props,\r\n  (val) => {\r\n    const bg = useWatermarkBg(val) // 水印参数\r\n    base64.value = bg.value.base64\r\n    styleSize.value = bg.value.styleSize\r\n    // 删除w-water-mask-bg class\r\n    document.querySelectorAll('.w-water-mask-bg').forEach((item) => {\r\n      item.remove()\r\n    })\r\n    // 重新添加水印\r\n    addDom()\r\n  },\r\n  {\r\n    deep: true,\r\n  },\r\n)\r\n\r\nonMounted(() => {\r\n  addDom()\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value?.remove()\r\n          addDom()\r\n          return\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove()\r\n        addDom()\r\n        return\r\n      }\r\n    }\r\n  })\r\n  k.value?.observe(watermarkContainer.value as HTMLElement, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  })\r\n})\r\nconst addDom = () => {\r\n  div.value = document.createElement('div')\r\n  div.value.style.backgroundImage = `url(${base64.value})`\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  // @ts-ignore\r\n  div.value.style.inset = 0\r\n  // @ts-ignore\r\n  div.value.style.zIndex = 9999\r\n  div.value.style.position = 'absolute'\r\n  div.value.style.backgroundRepeat = 'repeat'\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`\r\n  div.value.style.pointerEvents = 'none'\r\n  watermarkContainer.value?.appendChild(div.value)\r\n}\r\n</script>\r\n","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;"],"mappings":"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"}

package/demo.html

@@ -1 +0,0 @@
-<!doctype html><meta charset="utf-8"><title>watermark demo</title><script src="./watermark.umd.js"></script><link rel="stylesheet" href="./watermark.css"><script>console.log(watermark)</script>

package/watermark.common.js

@@ -1,343 +0,0 @@
-/******/ (function() { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	!function() {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = function(exports, definition) {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	}();
-/******/ 	
-/******/ 	/* webpack/runtime/publicPath */
-/******/ 	!function() {
-/******/ 		__webpack_require__.p = "";
-/******/ 	}();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": function() { return /* binding */ entry_lib; }
-});
-
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
-/* eslint-disable no-var */
-// This file is imported into lib/wc client bundles.
-
-if (typeof window !== 'undefined') {
-  var currentScript = window.document.currentScript
-  if (false) { var getCurrentScript; }
-
-  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
-  if (src) {
-    __webpack_require__.p = src[1] // eslint-disable-line
-  }
-}
-
-// Indicate to webpack that this file can be concatenated
-/* harmony default export */ var setPublicPath = (null);
-
-;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
-var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
-
-function useWatermarkBg(props) {
-  // 获取数组中宽度最长的文本和对应的最大宽度
-  function getLongestTextByWidth(textArr, ctx) {
-    // 边界处理：空数组直接返回空结果
-    if (!Array.isArray(textArr) || textArr.length === 0) {
-      return {
-        longestText: '',
-        maxWidth: 0
-      };
-    }
-
-    // 字符串直接返回宽度
-    if (typeof textArr === 'string') {
-      return {
-        longestText: textArr,
-        maxWidth: ctx.measureText(textArr).width
-      };
-    }
-
-    // 初始化变量：记录最长文本和最大宽度
-    let longestText = textArr[0];
-    let maxWidth = ctx.measureText(longestText).width;
-
-    // 遍历数组，逐个测量并比较宽度
-    for (let i = 1; i < textArr.length; i++) {
-      const currentText = textArr[i];
-      const currentWidth = ctx.measureText(currentText).width;
-      if (currentWidth > maxWidth) {
-        maxWidth = currentWidth;
-        longestText = currentText;
-      }
-    }
-    return {
-      longestText,
-      maxWidth
-    };
-  }
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
-    const canvas = document.createElement('canvas');
-    const devicePixelRatio = window.devicePixelRatio || 1;
-    const fontSize = props.waterFontSize * devicePixelRatio;
-    const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`;
-    const ctx = canvas.getContext('2d');
-    const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距
-
-    // 第一步：先设置字体，测量文字最大宽度
-    ctx.font = font;
-    const {
-      maxWidth
-    } = getLongestTextByWidth(props.waterName, ctx);
-
-    // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）
-    // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸
-    const textTotalWidth = maxWidth; // 文字原始最大宽度
-    const textTotalHeight = Array.isArray(props.waterName) ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize : fontSize; // 文字整体高度（多行文适配）
-    // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）
-    const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2;
-    canvas.width = baseCanvasSize;
-    canvas.height = baseCanvasSize;
-
-    // 第三步：重置上下文，配置样式（保持原有功能不变）
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.font = font;
-    ctx.fillStyle = props.waterFontColor;
-    ctx.textAlign = props.waterTextAlign;
-    ctx.textBaseline = 'middle';
-    ctx.shadowColor = props.shadowColor;
-    ctx.shadowOffsetX = props.shadowOffsetX;
-    ctx.shadowOffsetY = props.shadowOffsetY;
-    ctx.shadowBlur = props.shadowBlur;
-
-    // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）
-    // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡
-    // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间
-    const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）
-    ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中
-
-    // 旋转水印（保持原有配置，无过度偏移）
-    ctx.rotate(Math.PI / 180 * -props.waterRotate);
-
-    // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）
-    if (Array.isArray(props.waterName)) {
-      props.waterName.forEach((item, index) => {
-        // 垂直间距：适配设备像素比，保持原有排版逻辑
-        const verticalGap = fontSize + 6 * devicePixelRatio;
-        // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出
-        ctx.fillText(item, 0, index * verticalGap);
-      });
-    } else {
-      // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取
-      ctx.fillText(props.waterName, 0, 0);
-    }
-
-    // 返回水印信息
-    return {
-      base64: canvas.toDataURL(),
-      size: baseCanvasSize,
-      styleSize: baseCanvasSize / devicePixelRatio
-    };
-  });
-}
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
-
-
-
-const __default__ = {
-  name: 'watermark'
-};
-/* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
-  props: {
-    waterName: {
-      // 传入水印的文本
-      type: [String, Array],
-      required: true,
-      default: "watermark"
-    },
-    waterFontSize: {
-      // 字体的大小
-      type: Number,
-      default: 20
-    },
-    waterFontWeight: {
-      // 字体的粗细
-      type: Number,
-      default: 700
-    },
-    waterGap: {
-      // 水印重复的间隔
-      type: Number,
-      default: 100
-    },
-    waterRotate: {
-      // 水印倾斜
-      type: Number,
-      default: 20
-    },
-    waterFontFamily: {
-      // 水印字体
-      type: String,
-      default: "Microsoft Yahei"
-    },
-    waterTextAlign: {
-      // 水印对齐方式
-      type: String,
-      default: "left"
-    },
-    waterFontColor: {
-      // 水印字体颜色
-      type: String,
-      default: "rgba(255, 255, 255, 1)" // rgba(255, 255, 255, 0.2)
-    },
-    shadowColor: {
-      // 阴影颜色
-      type: String,
-      default: "rgba(61, 61, 61, 0.25)"
-    },
-    shadowOffsetX: {
-      // 阴影水平偏移
-      type: Number,
-      default: 1.5
-    },
-    shadowOffsetY: {
-      // 阴影垂直偏移
-      type: Number,
-      default: 1.5
-    },
-    shadowBlur: {
-      // 阴影模糊半径
-      type: Number,
-      default: 0
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 挂载的dom节点
-    const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 水印节点
-    const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 监听器
-    const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // base64
-    const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // styleSize
-    const bg = useWatermarkBg(props); // 水印参数
-    base64.value = bg.value.base64;
-    styleSize.value = bg.value.styleSize;
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(props, val => {
-      const bg = useWatermarkBg(val); // 水印参数
-      base64.value = bg.value.base64;
-      styleSize.value = bg.value.styleSize;
-      // 删除w-water-mask-bg class
-      document.querySelectorAll('.w-water-mask-bg').forEach(item => {
-        item.remove();
-      });
-      // 重新添加水印
-      addDom();
-    }, {
-      deep: true
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
-      addDom();
-
-      // 添加dom监控器
-      k.value = new MutationObserver(records => {
-        for (const record of records) {
-          for (const dom of record.removedNodes) {
-            if (dom === div.value) {
-              div.value.remove();
-              addDom();
-              return;
-            }
-          }
-          if (record.target === div.value) {
-            div.value.remove();
-            addDom();
-            return;
-          }
-        }
-      });
-      k.value.observe(watermarkContainer.value, {
-        childList: true,
-        attributes: true,
-        subtree: true
-      });
-    });
-    const addDom = () => {
-      div.value = document.createElement("div");
-      div.value.style.backgroundImage = `url(${base64.value})`;
-      // 添加个class
-      div.value.classList.add('w-water-mask-bg');
-      div.value.style.inset = 0;
-      div.value.style.zIndex = 9999;
-      div.value.style.position = "absolute";
-      div.value.style.backgroundRepeat = "repeat";
-      div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
-      div.value.style.pointerEvents = "none";
-      watermarkContainer.value.appendChild(div.value);
-    };
-    return (_ctx, _cache) => {
-      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-        class: "watermark-container",
-        ref_key: "watermarkContainer",
-        ref: watermarkContainer
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 512);
-    };
-  }
-}));
-;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue?vue&type=script&setup=true&lang=js
- 
-;// CONCATENATED MODULE: ./src/packages/water-mark/index.vue
-
-
-
-const __exports__ = water_markvue_type_script_setup_true_lang_js;
-
-/* harmony default export */ var water_mark = (__exports__);
-;// CONCATENATED MODULE: ./src/packages/index.js
-
-const components = [water_mark];
-
-// 注册组件
-const install = function (Vue) {
-  components.forEach(k => {
-    Vue.component(k.name, k);
-  });
-};
-/* harmony default export */ var src_packages = (install);
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
-
-
-/* harmony default export */ var entry_lib = (src_packages);
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
-//# sourceMappingURL=watermark.common.js.map

package/watermark.common.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"watermark.common.js","mappings":"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","sources":["webpack://vue3-watermark/webpack/bootstrap","webpack://vue3-watermark/webpack/runtime/define property getters","webpack://vue3-watermark/webpack/runtime/hasOwnProperty shorthand","webpack://vue3-watermark/webpack/runtime/make namespace object","webpack://vue3-watermark/webpack/runtime/publicPath","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue3-watermark/external commonjs2 {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://vue3-watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://vue3-watermark/./src/packages/water-mark/index.vue","webpack://vue3-watermark/./src/packages/water-mark/index.vue?e80c","webpack://vue3-watermark/./src/packages/water-mark/index.vue?ba69","webpack://vue3-watermark/./src/packages/index.js","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"vue\");","import { computed } from 'vue';\r\n\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n        // 边界处理：空数组直接返回空结果\r\n        if (!Array.isArray(textArr) || textArr.length === 0) {\r\n            return {\r\n                longestText: '',\r\n                maxWidth: 0\r\n            };\r\n        }\r\n\r\n        // 字符串直接返回宽度\r\n        if (typeof textArr === 'string') {\r\n            return {\r\n                longestText: textArr,\r\n                maxWidth: ctx.measureText(textArr).width\r\n            };\r\n        }\r\n\r\n        // 初始化变量：记录最长文本和最大宽度\r\n        let longestText = textArr[0];\r\n        let maxWidth = ctx.measureText(longestText).width;\r\n\r\n        // 遍历数组，逐个测量并比较宽度\r\n        for (let i = 1; i < textArr.length; i++) {\r\n            const currentText = textArr[i];\r\n            const currentWidth = ctx.measureText(currentText).width;\r\n\r\n            if (currentWidth > maxWidth) {\r\n                maxWidth = currentWidth;\r\n                longestText = currentText;\r\n            }\r\n        }\r\n\r\n        return {\r\n            longestText,\r\n            maxWidth\r\n        };\r\n    }\r\n\r\n    return computed(() => {\r\n        const canvas = document.createElement('canvas');\r\n        const devicePixelRatio = window.devicePixelRatio || 1;\r\n        const fontSize = props.waterFontSize * devicePixelRatio;\r\n        const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`;\r\n        const ctx = canvas.getContext('2d');\r\n        const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n        // 第一步：先设置字体，测量文字最大宽度\r\n        ctx.font = font;\r\n        const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n        // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n        // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n        const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n        const textTotalHeight = Array.isArray(props.waterName) \r\n            ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n            : fontSize; // 文字整体高度（多行文适配）\r\n        // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n        const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2;\r\n        canvas.width = baseCanvasSize;\r\n        canvas.height = baseCanvasSize;\r\n\r\n        // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        ctx.font = font;\r\n        ctx.fillStyle = props.waterFontColor;\r\n        ctx.textAlign = props.waterTextAlign;\r\n        ctx.textBaseline = 'middle';\r\n        ctx.shadowColor = props.shadowColor;\r\n        ctx.shadowOffsetX = props.shadowOffsetX;\r\n        ctx.shadowOffsetY = props.shadowOffsetY;\r\n        ctx.shadowBlur = props.shadowBlur;\r\n\r\n        // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n        // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n        // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n        const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n        ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n        // 旋转水印（保持原有配置，无过度偏移）\r\n        ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n        // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n        if (Array.isArray(props.waterName)) {\r\n            props.waterName.forEach((item, index) => {\r\n                // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n                const verticalGap = fontSize + 6 * devicePixelRatio;\r\n                // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出\r\n                ctx.fillText(item, 0, index * verticalGap);\r\n            });\r\n        } else {\r\n            // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n            ctx.fillText(props.waterName, 0, 0);\r\n        }\r\n\r\n        // 返回水印信息\r\n        return {\r\n            base64: canvas.toDataURL(),\r\n            size: baseCanvasSize,\r\n            styleSize: baseCanvasSize / devicePixelRatio,\r\n        };\r\n    });\r\n}","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref, watch } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: \"left\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n  const bg = useWatermarkBg(val); // 水印参数\r\n  base64.value = bg.value.base64\r\n  styleSize.value = bg.value.styleSize\r\n  // 删除w-water-mask-bg class\r\n  document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n    item.remove();\r\n  })\r\n  // 重新添加水印\r\n  addDom();\r\n},{\r\n  deep: true\r\n})\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64.value})`;\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","onMounted","ref","watch","__default__","name","__props","watermarkContainer","div","k","bg","value","val","querySelectorAll","remove","addDom","deep","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}

package/watermark.umd.min.js

@@ -1,2 +0,0 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["watermark"]=t(require("vue")):e["watermark"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={274:function(t){t.exports=e}},r={};function a(e){var o=r[e];if(void 0!==o)return o.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,a),n.exports}!function(){a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){a.p=""}();var o={};return function(){if(a.r(o),a.d(o,{default:function(){return m}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(a.p=t[1])}var r=a(274);function n(e){function t(e,t){if(!Array.isArray(e)||0===e.length)return{longestText:"",maxWidth:0};if("string"===typeof e)return{longestText:e,maxWidth:t.measureText(e).width};let r=e[0],a=t.measureText(r).width;for(let o=1;o<e.length;o++){const n=e[o],l=t.measureText(n).width;l>a&&(a=l,r=n)}return{longestText:r,maxWidth:a}}return(0,r.computed)((()=>{const r=document.createElement("canvas"),a=window.devicePixelRatio||1,o=e.waterFontSize*a,n=`${e.waterFontWeight} ${o}px ${e.waterFontFamily}`,l=r.getContext("2d"),u=e.waterGap*a;l.font=n;const{maxWidth:i}=t(e.waterName,l),s=i,f=Array.isArray(e.waterName)?(e.waterName.length-1)*(o+6*a)+o:o,d=Math.max(100,Math.sqrt(s**2+f**2))+2*u;r.width=d,r.height=d,l.clearRect(0,0,r.width,r.height),l.font=n,l.fillStyle=e.waterFontColor,l.textAlign=e.waterTextAlign,l.textBaseline="middle",l.shadowColor=e.shadowColor,l.shadowOffsetX=e.shadowOffsetX,l.shadowOffsetY=e.shadowOffsetY,l.shadowBlur=e.shadowBlur;const c=u;return l.translate(c,r.height/2),l.rotate(Math.PI/180*-e.waterRotate),Array.isArray(e.waterName)?e.waterName.forEach(((e,t)=>{const r=o+6*a;l.fillText(e,0,t*r)})):l.fillText(e.waterName,0,0),{base64:r.toDataURL(),size:d,styleSize:d/a}}))}const l={name:"watermark"};var u=Object.assign(l,{props:{waterName:{type:[String,Array],required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:100},waterRotate:{type:Number,default:20},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterTextAlign:{type:String,default:"left"},waterFontColor:{type:String,default:"rgba(255, 255, 255, 1)"},shadowColor:{type:String,default:"rgba(61, 61, 61, 0.25)"},shadowOffsetX:{type:Number,default:1.5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(e){const t=e,a=(0,r.ref)(null),o=(0,r.ref)(null),l=(0,r.ref)(null),u=(0,r.ref)(null),i=(0,r.ref)(null),s=n(t);u.value=s.value.base64,i.value=s.value.styleSize,(0,r.watch)(t,(e=>{const t=n(e);u.value=t.value.base64,i.value=t.value.styleSize,document.querySelectorAll(".w-water-mask-bg").forEach((e=>{e.remove()})),f()}),{deep:!0}),(0,r.onMounted)((()=>{f(),l.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===o.value)return o.value.remove(),void f();if(t.target===o.value)return o.value.remove(),void f()}})),l.value.observe(a.value,{childList:!0,attributes:!0,subtree:!0})}));const f=()=>{o.value=document.createElement("div"),o.value.style.backgroundImage=`url(${u.value})`,o.value.classList.add("w-water-mask-bg"),o.value.style.inset=0,o.value.style.zIndex=9999,o.value.style.position="absolute",o.value.style.backgroundRepeat="repeat",o.value.style.backgroundSize=`${i.value}px ${i.value}px`,o.value.style.pointerEvents="none",a.value.appendChild(o.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:a},[(0,r.renderSlot)(e.$slots,"default")],512))}});const i=u;var s=i;const f=[s],d=function(e){f.forEach((t=>{e.component(t.name,t)}))};var c=d,m=c}(),o}()}));
-//# sourceMappingURL=watermark.umd.min.js.map

package/watermark.umd.min.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"watermark.umd.min.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\n\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n        // 边界处理：空数组直接返回空结果\r\n        if (!Array.isArray(textArr) || textArr.length === 0) {\r\n            return {\r\n                longestText: '',\r\n                maxWidth: 0\r\n            };\r\n        }\r\n\r\n        // 字符串直接返回宽度\r\n        if (typeof textArr === 'string') {\r\n            return {\r\n                longestText: textArr,\r\n                maxWidth: ctx.measureText(textArr).width\r\n            };\r\n        }\r\n\r\n        // 初始化变量：记录最长文本和最大宽度\r\n        let longestText = textArr[0];\r\n        let maxWidth = ctx.measureText(longestText).width;\r\n\r\n        // 遍历数组，逐个测量并比较宽度\r\n        for (let i = 1; i < textArr.length; i++) {\r\n            const currentText = textArr[i];\r\n            const currentWidth = ctx.measureText(currentText).width;\r\n\r\n            if (currentWidth > maxWidth) {\r\n                maxWidth = currentWidth;\r\n                longestText = currentText;\r\n            }\r\n        }\r\n\r\n        return {\r\n            longestText,\r\n            maxWidth\r\n        };\r\n    }\r\n\r\n    return computed(() => {\r\n        const canvas = document.createElement('canvas');\r\n        const devicePixelRatio = window.devicePixelRatio || 1;\r\n        const fontSize = props.waterFontSize * devicePixelRatio;\r\n        const font = `${props.waterFontWeight} ${fontSize}px ${props.waterFontFamily}`;\r\n        const ctx = canvas.getContext('2d');\r\n        const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n        // 第一步：先设置字体，测量文字最大宽度\r\n        ctx.font = font;\r\n        const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n        // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n        // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n        const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n        const textTotalHeight = Array.isArray(props.waterName) \r\n            ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n            : fontSize; // 文字整体高度（多行文适配）\r\n        // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n        const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth ** 2 + textTotalHeight ** 2)) + waterGap * 2;\r\n        canvas.width = baseCanvasSize;\r\n        canvas.height = baseCanvasSize;\r\n\r\n        // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        ctx.font = font;\r\n        ctx.fillStyle = props.waterFontColor;\r\n        ctx.textAlign = props.waterTextAlign;\r\n        ctx.textBaseline = 'middle';\r\n        ctx.shadowColor = props.shadowColor;\r\n        ctx.shadowOffsetX = props.shadowOffsetX;\r\n        ctx.shadowOffsetY = props.shadowOffsetY;\r\n        ctx.shadowBlur = props.shadowBlur;\r\n\r\n        // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n        // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n        // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n        const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n        ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n        // 旋转水印（保持原有配置，无过度偏移）\r\n        ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n        // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n        if (Array.isArray(props.waterName)) {\r\n            props.waterName.forEach((item, index) => {\r\n                // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n                const verticalGap = fontSize + 6 * devicePixelRatio;\r\n                // 绘制起点：(0, index*verticalGap)，无额外水平偏移，避免右侧溢出\r\n                ctx.fillText(item, 0, index * verticalGap);\r\n            });\r\n        } else {\r\n            // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n            ctx.fillText(props.waterName, 0, 0);\r\n        }\r\n\r\n        // 返回水印信息\r\n        return {\r\n            base64: canvas.toDataURL(),\r\n            size: baseCanvasSize,\r\n            styleSize: baseCanvasSize / devicePixelRatio,\r\n        };\r\n    });\r\n}","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref, watch } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 100,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterTextAlign: {\r\n    // 水印对齐方式\r\n    type: String,\r\n    default: \"left\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n  const bg = useWatermarkBg(val); // 水印参数\r\n  base64.value = bg.value.base64\r\n  styleSize.value = bg.value.styleSize\r\n  // 删除w-water-mask-bg class\r\n  document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n    item.remove();\r\n  })\r\n  // 重新添加水印\r\n  addDom();\r\n},{\r\n  deep: true\r\n})\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64.value})`;\r\n  // 添加个class\r\n  div.value.classList.add('w-water-mask-bg')\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","watch","val","querySelectorAll","remove","addDom","deep","onMounted","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","component"],"sourceRoot":""}