ele-admin-plus 1.4.1-beta.1 → 1.4.1

package/lib/ele-watermark/index.cjs

@@ -2,6 +2,17 @@
 const vue = require("vue");
 const util = require("./util");
 const props = require("./props");
+const _hoisted_1 = ["id", "width", "height"];
+const _hoisted_2 = ["transform"];
+const _hoisted_3 = ["href", "width", "height", "x", "y"];
+const _hoisted_4 = ["transform"];
+const _hoisted_5 = ["href", "width", "height", "x", "y"];
+const _hoisted_6 = ["id", "width", "height"];
+const _hoisted_7 = ["transform"];
+const _hoisted_8 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
+const _hoisted_9 = ["transform"];
+const _hoisted_10 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
+const _hoisted_11 = ["fill", "transform"];
 const SIZE = 2;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleWatermark" },
@@ -9,7 +20,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: props.watermarkProps,
   setup(__props) {
     const props2 = __props;
-    const { observe, disconnect } = util.useMutation({
+    const { observe, observeTextNode, disconnect } = util.useMutation({
       getRoot: () => rootRef.value,
       getEl: () => imgRef.value,
       onDeleted: () => {
@@ -23,95 +34,121 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         render();
       }
     });
+    const svgId = vue.useId();
     const rootKey = vue.ref(1);
     const rootRef = vue.ref(null);
     const imgRef = vue.ref(null);
-    const imgStyle = vue.ref({ display: "none" });
-    const updateStyle = (base64, size) => {
+    const imgStyle = vue.ref(util.joinStyle({ display: "none" }));
+    const markWidth = vue.computed(() => {
+      return props2.width ?? 120;
+    });
+    const markHeight = vue.computed(() => {
+      return props2.height ?? 64;
+    });
+    const markGapX = vue.computed(() => {
+      var _a;
+      return ((_a = props2.gap) == null ? void 0 : _a[0]) ?? 100;
+    });
+    const markGapY = vue.computed(() => {
+      var _a;
+      return ((_a = props2.gap) == null ? void 0 : _a[1]) ?? 100;
+    });
+    const markOffsetX = vue.computed(() => {
+      var _a;
+      return ((_a = props2.offset) == null ? void 0 : _a[0]) ?? markGapX.value / 2;
+    });
+    const markOffsetY = vue.computed(() => {
+      var _a;
+      return ((_a = props2.offset) == null ? void 0 : _a[1]) ?? markGapY.value / 2;
+    });
+    const markFont = vue.computed(() => {
+      return {
+        color: "rgba(122, 122, 122, 0.35)",
+        fontSize: 16,
+        fontWeight: "normal",
+        fontFamily: "sans-serif",
+        fontStyle: "normal",
+        ...props2.font || {}
+      };
+    });
+    const markContents = vue.computed(() => {
+      if (typeof props2.content === "string") {
+        return [props2.content];
+      }
+      return props2.content || [];
+    });
+    const markCommonStyle = vue.computed(() => {
       const position = props2.fixed ? "fixed" : "absolute";
       const width = props2.fixed ? "100vw" : "100%";
       const height = props2.fixed ? "100vh" : "100%";
-      const style = {
+      return {
         position: `${position} !important`,
         top: "0 !important",
         left: "0 !important",
-        right: "auto !important",
-        bottom: "auto !important",
+        right: "0 !important",
+        bottom: "0 !important",
         width: `${width} !important`,
         height: `${height} !important`,
+        zIndex: `${props2.zIndex ?? 2147483647} !important`,
         pointerEvents: "none !important",
-        backgroundRepeat: "repeat !important",
-        opacity: "1 !important",
-        transform: "none !important",
-        filter: "none !important",
-        visibility: "visible !important",
-        transition: "none !important",
-        maxWidth: "none !important",
-        maxHeight: "none !important",
-        zoom: "1 !important",
-        mask: "none !important",
-        clipPath: "none !important",
-        display: "block !important",
         ...props2.customStyle || {}
       };
+    });
+    const infoLog = vue.inject(util.INFO_LOG_KEY, void 0);
+    const svgStyle = vue.computed(() => util.joinStyle(markCommonStyle.value));
+    const updateStyle = (base64, imgWidth, imgHeight) => {
+      disconnect();
+      const style = { ...markCommonStyle.value };
       if (!base64) {
         style.display = "none !important";
       } else {
         style.backgroundImage = `url('${base64}') !important`;
-        if (size) {
-          style.backgroundSize = `${size} !important`;
+        style.backgroundSize = `${imgWidth}px ${imgHeight}px !important`;
+        let positionLeft = markOffsetX.value - markGapX.value / 2;
+        let positionTop = markOffsetY.value - markGapY.value / 2;
+        if (positionLeft > 0) {
+          style.left = `${positionLeft}px !important`;
+          style.width = `calc(100% - ${positionLeft}px) !important`;
+          positionLeft = 0;
+        }
+        if (positionTop > 0) {
+          style.top = `${positionTop}px !important`;
+          style.height = `calc(100% - ${positionTop}px) !important`;
+          positionTop = 0;
         }
-        style.zIndex = `${props2.zIndex ?? 2147483647} !important`;
+        style.backgroundPosition = `${positionLeft}px ${positionTop}px !important`;
       }
-      disconnect();
-      if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
-        imgRef.value.style.cssText = util.joinStyle(style);
+      imgStyle.value = util.joinStyle(style);
+      vue.nextTick(() => {
         observe();
-      } else {
-        imgStyle.value = style;
-        vue.nextTick(() => {
-          observe();
-        });
-      }
-    };
-    const infoLog = vue.inject(util.INFO_LOG_KEY, void 0);
-    const getDefaultWidth = (ctx) => {
-      if (props2.image || !ctx.measureText) {
-        return 120;
-      }
-      const content = props2.content;
-      const contents = Array.isArray(content) ? content : [content];
-      const widths = contents.map((item) => ctx.measureText(item).width);
-      return Math.ceil(Math.max(...widths));
-    };
-    const getDefaultHeight = (ctx) => {
-      if (props2.image || !ctx.measureText) {
-        return 64;
-      }
-      const lines = Array.isArray(props2.content) ? props2.content.length : 1;
-      const { fontSize } = util.getFont(props2.font);
-      return fontSize * lines + (lines - 1) * props2.lineGap;
+      });
     };
     const getMarkSize = (ctx) => {
-      const width = props2.width;
-      const height = props2.height;
-      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
+      if (props2.image || props2.width != null && props2.height != null || !ctx.measureText) {
+        return [markWidth.value, markHeight.value];
+      }
+      const widths = markContents.value.map(
+        (text) => ctx.measureText(text).width
+      );
+      const textWidth = Math.ceil(Math.max(...widths));
+      const lines = markContents.value.length;
+      const { fontSize } = markFont.value;
+      const textHeight = fontSize * lines + (lines - 1) * props2.lineGap;
+      return [props2.width ?? textWidth, props2.height ?? textHeight];
     };
     const froined = vue.computed(() => !!(infoLog && !infoLog.froined));
+    const isDisabled = vue.computed(() => !(!props2.disabled || froined.value));
     const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
       const ratio = util.getPixelRatio();
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = util.getFont(
-        props2.font
-      );
+      const { color, fontSize, fontStyle, fontWeight, fontFamily } = markFont.value;
       const mergedFontSize = fontSize * ratio;
-      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
       ctx.fillStyle = color;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
+      const froin = "el-n-d-s-p";
       ctx.textAlign = "center";
       ctx.textBaseline = "top";
       ctx.translate(drawWidth / 2, 0);
-      const content = props2.content;
-      const froin = ["el", "nimda", "sulp"].reverse().join(" ").split("");
-      const contents = froined.value ? [`e${froin.reduce((n, m) => m + n, "")}`.toUpperCase()] : Array.isArray(content) ? content : content == null ? [] : [content];
+      const contents = froined.value ? [`e${observeTextNode(froin)}`.toUpperCase()] : markContents.value;
       contents.forEach((item, index) => {
         ctx.fillText(
           item ?? "",
@@ -121,9 +158,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     };
     const render = () => {
-      if (props2.disabled && !froined.value) {
+      if (props2.svgRender || isDisabled.value) {
         disconnect();
-        imgStyle.value = { display: "none" };
+        imgStyle.value = util.joinStyle({ display: "none" });
         return;
       }
       const canvas = document.createElement("canvas");
@@ -131,20 +168,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (!ctx) {
         return;
       }
-      const rotate = props2.rotate ?? -22;
+      const rotate = props2.rotate;
+      const gapX = markGapX.value;
+      const gapY = markGapY.value;
       if (!props2.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = util.getFont(props2.font);
+        const { fontSize, fontFamily } = markFont.value;
         ctx.font = `${fontSize}px ${fontFamily}`;
       }
-      const [markWidth, markHeight] = getMarkSize(ctx);
+      const [markWidth2, markHeight2] = getMarkSize(ctx);
       const ratio = util.getPixelRatio();
-      const [gapX, gapY] = util.getGap(props2.gap);
-      const canvasWidth = (gapX + markWidth) * ratio;
-      const canvasHeight = (gapY + markHeight) * ratio;
+      const canvasWidth = (gapX + markWidth2) * ratio;
+      const canvasHeight = (gapY + markHeight2) * ratio;
       canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
       canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
-      const drawWidth = markWidth * ratio;
-      const drawHeight = markHeight * ratio;
+      const drawWidth = markWidth2 * ratio;
+      const drawHeight = markHeight2 * ratio;
       const rotateX = (drawWidth + gapX * ratio) / 2;
       const rotateY = (drawHeight + gapY * ratio) / 2;
       ctx.save();
@@ -159,52 +197,173 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         const img = new Image();
         img.onload = () => {
           ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-          ctx.restore();
-          util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-          ctx.drawImage(
-            img,
-            alternateDrawX,
-            alternateDrawY,
-            drawWidth,
-            drawHeight
+          {
+            ctx.restore();
+            util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+            ctx.drawImage(
+              img,
+              alternateDrawX,
+              alternateDrawY,
+              drawWidth,
+              drawHeight
+            );
+          }
+          updateStyle(
+            canvas.toDataURL(),
+            (gapX + markWidth2) * SIZE,
+            (gapY + markHeight2) * SIZE
           );
-          updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
         };
         img.crossOrigin = "anonymous";
         img.referrerPolicy = "no-referrer";
         img.src = props2.image;
       } else {
         fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
-        ctx.restore();
-        util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-        fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-        updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+        {
+          ctx.restore();
+          util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+          fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
+        }
+        updateStyle(
+          canvas.toDataURL(),
+          (gapX + markWidth2) * SIZE,
+          (gapY + markHeight2) * SIZE
+        );
       }
     };
-    vue.onMounted(() => {
-      render();
-    });
     vue.watch(
-      [() => props2, froined],
+      [
+        () => props2.rotate,
+        () => props2.image,
+        () => props2.lineGap,
+        () => props2.svgRender,
+        markWidth,
+        markHeight,
+        markGapX,
+        markGapY,
+        markOffsetX,
+        markOffsetY,
+        markFont,
+        markContents,
+        markCommonStyle,
+        isDisabled
+      ],
       () => {
         render();
       },
       { deep: true }
     );
+    vue.onMounted(() => {
+      render();
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "rootRef",
         ref: rootRef,
         key: rootKey.value,
-        style: vue.normalizeStyle(!_ctx.wrapPosition || _ctx.fixed ? void 0 : { position: "relative" })
+        style: vue.normalizeStyle([
+          props2.wrapHeight == null ? {} : { height: props2.wrapHeight },
+          !_ctx.wrapPosition || _ctx.fixed ? {} : { position: "relative" }
+        ])
       }, [
         vue.renderSlot(_ctx.$slots, "default"),
-        !_ctx.disabled || froined.value ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          ref_key: "imgRef",
-          ref: imgRef,
-          style: vue.normalizeStyle(imgStyle.value)
-        }, null, 4)) : vue.createCommentVNode("", true)
+        !isDisabled.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          _ctx.svgRender ? (vue.openBlock(), vue.createElementBlock("svg", {
+            key: 0,
+            style: vue.normalizeStyle(svgStyle.value)
+          }, [
+            vue.createElementVNode("defs", null, [
+              _ctx.image ? (vue.openBlock(), vue.createElementBlock("pattern", {
+                key: 0,
+                id: `imgPattern-${vue.unref(svgId)}`,
+                patternUnits: "userSpaceOnUse",
+                width: (markWidth.value + markGapX.value) * SIZE,
+                height: (markHeight.value + markGapY.value) * SIZE
+              }, [
+                vue.createElementVNode("g", {
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
+                }, [
+                  vue.createElementVNode("image", {
+                    href: _ctx.image,
+                    width: markWidth.value,
+                    height: markHeight.value,
+                    x: markGapX.value / 2,
+                    y: markGapY.value / 2
+                  }, null, 8, _hoisted_3)
+                ], 8, _hoisted_2),
+                (vue.openBlock(), vue.createElementBlock("g", {
+                  key: 0,
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
+                }, [
+                  vue.createElementVNode("image", {
+                    href: _ctx.image,
+                    width: markWidth.value,
+                    height: markHeight.value,
+                    x: markGapX.value / 2 + markWidth.value + markGapX.value,
+                    y: markGapY.value / 2 + markHeight.value + markGapY.value
+                  }, null, 8, _hoisted_5)
+                ], 8, _hoisted_4))
+              ], 8, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("pattern", {
+                key: 1,
+                id: `textPattern-${vue.unref(svgId)}`,
+                patternUnits: "userSpaceOnUse",
+                width: (markWidth.value + markGapX.value) * SIZE,
+                height: (markHeight.value + markGapY.value) * SIZE
+              }, [
+                vue.createElementVNode("g", {
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(markContents.value, (text, index) => {
+                    return vue.openBlock(), vue.createElementBlock("text", {
+                      key: index,
+                      x: (markWidth.value + markGapX.value) / 2,
+                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap),
+                      fill: markFont.value.color,
+                      "font-size": markFont.value.fontSize,
+                      "font-weight": markFont.value.fontWeight,
+                      "font-family": markFont.value.fontFamily,
+                      "font-style": markFont.value.fontStyle,
+                      "text-anchor": "middle",
+                      "alignment-baseline": "hanging",
+                      "vector-effect": "non-scaling-stroke"
+                    }, vue.toDisplayString(text), 9, _hoisted_8);
+                  }), 128))
+                ], 8, _hoisted_7),
+                (vue.openBlock(), vue.createElementBlock("g", {
+                  key: 0,
+                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(markContents.value, (text, index) => {
+                    return vue.openBlock(), vue.createElementBlock("text", {
+                      key: index,
+                      x: (markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value,
+                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap) + markHeight.value + markGapY.value,
+                      fill: markFont.value.color,
+                      "font-size": markFont.value.fontSize,
+                      "font-weight": markFont.value.fontWeight,
+                      "font-family": markFont.value.fontFamily,
+                      "font-style": markFont.value.fontStyle,
+                      "text-anchor": "middle",
+                      "alignment-baseline": "hanging",
+                      "vector-effect": "non-scaling-stroke"
+                    }, vue.toDisplayString(text), 9, _hoisted_10);
+                  }), 128))
+                ], 8, _hoisted_9))
+              ], 8, _hoisted_6))
+            ]),
+            vue.createElementVNode("rect", {
+              width: "100%",
+              height: "100%",
+              fill: `url(#${_ctx.image ? "img" : "text"}Pattern-${vue.unref(svgId)})`,
+              transform: `translate(${markOffsetX.value - markGapX.value / 2}, ${markOffsetY.value - markGapY.value / 2})`
+            }, null, 8, _hoisted_11)
+          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            ref_key: "imgRef",
+            ref: imgRef,
+            style: vue.normalizeStyle(imgStyle.value)
+          }, null, 4))
+        ], 64)) : vue.createCommentVNode("", true)
       ], 4);
     };
   }

package/lib/ele-watermark/index.d.ts

@@ -1,4 +1,5 @@
 import { StyleValue } from '../ele-app/types';
+import { WatermarkFont } from './types';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -6,11 +7,14 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     width: NumberConstructor;
     height: NumberConstructor;
-    rotate: NumberConstructor;
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
     zIndex: NumberConstructor;
     image: StringConstructor;
     content: import('vue').PropType<string | string[]>;
-    font: import('vue').PropType<import('./types').WatermarkFont>;
+    font: import('vue').PropType<WatermarkFont>;
     gap: import('vue').PropType<import('./types').WatermarkGap>;
     offset: import('vue').PropType<import('./types').WatermarkOffset>;
     lineGap: {
@@ -18,20 +22,25 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: number;
     };
     customStyle: import('vue').PropType<Exclude<StyleValue, string>>;
+    svgRender: BooleanConstructor;
+    disabled: BooleanConstructor;
     fixed: BooleanConstructor;
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: BooleanConstructor;
+    wrapHeight: StringConstructor;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     width: NumberConstructor;
     height: NumberConstructor;
-    rotate: NumberConstructor;
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
     zIndex: NumberConstructor;
     image: StringConstructor;
     content: import('vue').PropType<string | string[]>;
-    font: import('vue').PropType<import('./types').WatermarkFont>;
+    font: import('vue').PropType<WatermarkFont>;
     gap: import('vue').PropType<import('./types').WatermarkGap>;
     offset: import('vue').PropType<import('./types').WatermarkOffset>;
     lineGap: {
@@ -39,17 +48,21 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         default: number;
     };
     customStyle: import('vue').PropType<Exclude<StyleValue, string>>;
+    svgRender: BooleanConstructor;
+    disabled: BooleanConstructor;
     fixed: BooleanConstructor;
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: BooleanConstructor;
+    wrapHeight: StringConstructor;
 }>> & Readonly<{}>, {
     fixed: boolean;
+    rotate: number;
     lineGap: number;
-    wrapPosition: boolean;
+    svgRender: boolean;
     disabled: boolean;
+    wrapPosition: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/ele-watermark/props.cjs

@@ -6,7 +6,10 @@ const watermarkProps = {
   /** 高度 */
   height: Number,
   /** 旋转角度 */
-  rotate: Number,
+  rotate: {
+    type: Number,
+    default: -22
+  },
   /** 层级 */
   zIndex: Number,
   /** 图片源 */
@@ -26,6 +29,10 @@ const watermarkProps = {
   },
   /** 自定义样式 */
   customStyle: Object,
+  /** 是否使用 svg 渲染 */
+  svgRender: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
   /** 是否使用固定定位 */
   fixed: Boolean,
   /** 是否为外层添加定位样式 */
@@ -33,7 +40,7 @@ const watermarkProps = {
     type: Boolean,
     default: true
   },
-  /** 是否禁用 */
-  disabled: Boolean
+  /** 外层高度 */
+  wrapHeight: String
 };
 exports.watermarkProps = watermarkProps;

package/lib/ele-watermark/props.d.ts

@@ -8,7 +8,10 @@ export declare const watermarkProps: {
     /** 高度 */
     height: NumberConstructor;
     /** 旋转角度 */
-    rotate: NumberConstructor;
+    rotate: {
+        type: NumberConstructor;
+        default: number;
+    };
     /** 层级 */
     zIndex: NumberConstructor;
     /** 图片源 */
@@ -28,6 +31,10 @@ export declare const watermarkProps: {
     };
     /** 自定义样式 */
     customStyle: PropType<Exclude<StyleValue, string>>;
+    /** 是否使用 svg 渲染 */
+    svgRender: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
     /** 是否使用固定定位 */
     fixed: BooleanConstructor;
     /** 是否为外层添加定位样式 */
@@ -35,7 +42,7 @@ export declare const watermarkProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 是否禁用 */
-    disabled: BooleanConstructor;
+    /** 外层高度 */
+    wrapHeight: StringConstructor;
 };
 export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/lib/ele-watermark/types.d.ts

@@ -37,3 +37,15 @@ export interface MutationOption {
   /** 水印样式被篡改回调 */
   onDalsified: () => void;
 }
+
+/**
+ * 水印图片的数据
+ */
+export interface WatermarkImgData {
+  /** 图片的宽度 */
+  width: number;
+  /** 图片的高度 */
+  height: number;
+  /** 图片的base64数据 */
+  base64: string;
+}

package/lib/ele-watermark/util.cjs

@@ -2,20 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const common = require("../utils/common");
-function getFont(font) {
-  const style = {
-    color: "rgba(122, 122, 122, .35)",
-    fontSize: 16,
-    fontWeight: "normal",
-    fontFamily: "sans-serif",
-    fontStyle: "normal"
-  };
-  return Object.assign(style, font);
-}
-function getGap(gap) {
-  const [gapX, gapY] = gap ?? [];
-  return [gapX ?? 100, gapY ?? 100];
-}
 function getPixelRatio() {
   return window.devicePixelRatio || 1;
 }
@@ -31,9 +17,9 @@ function rotateWatermark(ctx, rotateX, rotateY, rotate) {
 function joinStyle(style) {
   const result = Object.keys(style).map((key) => {
     const name = key.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
-    return `${name}:${style[key]}`;
+    return `${name}:${style[key]};`;
   });
-  return result.join(";");
+  return result.join("");
 }
 function useMutation(option) {
   const { getRoot, getEl, onDeleted, onDalsified } = option;
@@ -48,6 +34,13 @@ function useMutation(option) {
   const falsifiedObserver = new MutationObserver(() => {
     onDalsified();
   });
+  const observeTextNode = (text) => {
+    let i = 0;
+    return text.replace(/-/g, () => {
+      i++;
+      return ["", "-", "im", "a-", "ul"][i];
+    }).split("-").reverse().join(" ").split("").reduce((n, m) => m + n, "");
+  };
   const observe = () => {
     const el = getEl();
     if (el) {
@@ -65,14 +58,12 @@ function useMutation(option) {
   vue.onBeforeUnmount(() => {
     disconnect();
   });
-  return { observe, disconnect };
+  return { observe, observeTextNode, disconnect };
 }
 Object.defineProperty(exports, "INFO_LOG_KEY", {
   enumerable: true,
   get: () => common.ERROR_MESSAGE_KEY
 });
-exports.getFont = getFont;
-exports.getGap = getGap;
 exports.getPixelRatio = getPixelRatio;
 exports.joinStyle = joinStyle;
 exports.rotateWatermark = rotateWatermark;