ele-admin-plus 1.2.0-beta.6 → 1.2.1-beta.1

package/es/ele-qr-code/qrcodegen.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var qrcodegen;
 ((qrcodegen2) => {
   const _QrCode = class _QrCode {
@@ -30,12 +27,10 @@ var qrcodegen;
       this.errorCorrectionLevel = errorCorrectionLevel;
       if (version < _QrCode.MIN_VERSION || version > _QrCode.MAX_VERSION)
         throw "Version value out of range";
-      if (msk < -1 || msk > 7)
-        throw "Mask value out of range";
+      if (msk < -1 || msk > 7) throw "Mask value out of range";
       this.size = version * 4 + 17;
       let row = [];
-      for (let i = 0; i < this.size; i++)
-        row.push(false);
+      for (let i = 0; i < this.size; i++) row.push(false);
       for (let i = 0; i < this.size; i++) {
         this.modules.push(row.slice());
         this.isFunction.push(row.slice());
@@ -117,8 +112,7 @@ var qrcodegen;
       for (const seg of segs) {
         appendBits(seg.mode.modeBits, 4, bb);
         appendBits(seg.numChars, seg.mode.numCharCountBits(version), bb);
-        for (const b of seg.getData())
-          bb.push(b);
+        for (const b of seg.getData()) bb.push(b);
       }
       assert(bb.length == dataUsedBits);
       const dataCapacityBits = _QrCode.getNumDataCodewords(version, ecl) * 8;
@@ -129,8 +123,7 @@ var qrcodegen;
       for (let padByte = 236; bb.length < dataCapacityBits; padByte ^= 236 ^ 17)
         appendBits(padByte, 8, bb);
       let dataCodewords = [];
-      while (dataCodewords.length * 8 < bb.length)
-        dataCodewords.push(0);
+      while (dataCodewords.length * 8 < bb.length) dataCodewords.push(0);
       bb.forEach(
         (b, i) => dataCodewords[i >>> 3] |= b << 7 - (i & 7)
       );
@@ -173,8 +166,7 @@ var qrcodegen;
     drawFormatBits(mask) {
       const data = this.errorCorrectionLevel.formatBits << 3 | mask;
       let rem = data;
-      for (let i = 0; i < 10; i++)
-        rem = rem << 1 ^ (rem >>> 9) * 1335;
+      for (let i = 0; i < 10; i++) rem = rem << 1 ^ (rem >>> 9) * 1335;
       const bits = (data << 10 | rem) ^ 21522;
       assert(bits >>> 15 == 0);
       for (let i = 0; i <= 5; i++)
@@ -193,11 +185,9 @@ var qrcodegen;
     // Draws two copies of the version bits (with its own error correction code),
     // based on this object's version field, iff 7 <= version <= 40.
     drawVersion() {
-      if (this.version < 7)
-        return;
+      if (this.version < 7) return;
       let rem = this.version;
-      for (let i = 0; i < 12; i++)
-        rem = rem << 1 ^ (rem >>> 11) * 7973;
+      for (let i = 0; i < 12; i++) rem = rem << 1 ^ (rem >>> 11) * 7973;
       const bits = this.version << 12 | rem;
       assert(bits >>> 18 == 0);
       for (let i = 0; i < 18; i++) {
@@ -263,8 +253,7 @@ var qrcodegen;
         );
         k += dat.length;
         const ecc = _QrCode.reedSolomonComputeRemainder(dat, rsDiv);
-        if (i < numShortBlocks)
-          dat.push(0);
+        if (i < numShortBlocks) dat.push(0);
         blocks.push(dat.concat(ecc));
       }
       let result = [];
@@ -284,8 +273,7 @@ var qrcodegen;
         throw "Invalid argument";
       let i = 0;
       for (let right = this.size - 1; right >= 1; right -= 2) {
-        if (right == 6)
-          right = 5;
+        if (right == 6) right = 5;
         for (let vert = 0; vert < this.size; vert++) {
           for (let j = 0; j < 2; j++) {
             const x = right - j;
@@ -306,8 +294,7 @@ var qrcodegen;
     // the same mask value a second time will undo the mask. A final well-formed
     // QR Code needs exactly one (not zero, two, etc.) mask applied.
     applyMask(mask) {
-      if (mask < 0 || mask > 7)
-        throw "Mask value out of range";
+      if (mask < 0 || mask > 7) throw "Mask value out of range";
       for (let y = 0; y < this.size; y++) {
         for (let x = 0; x < this.size; x++) {
           let invert;
@@ -355,10 +342,8 @@ var qrcodegen;
         for (let x = 0; x < this.size; x++) {
           if (this.modules[y][x] == runColor) {
             runX++;
-            if (runX == 5)
-              result += _QrCode.PENALTY_N1;
-            else if (runX > 5)
-              result++;
+            if (runX == 5) result += _QrCode.PENALTY_N1;
+            else if (runX > 5) result++;
           } else {
             this.finderPenaltyAddHistory(runX, runHistory);
             if (!runColor)
@@ -376,10 +361,8 @@ var qrcodegen;
         for (let y = 0; y < this.size; y++) {
           if (this.modules[y][x] == runColor) {
             runY++;
-            if (runY == 5)
-              result += _QrCode.PENALTY_N1;
-            else if (runY > 5)
-              result++;
+            if (runY == 5) result += _QrCode.PENALTY_N1;
+            else if (runY > 5) result++;
           } else {
             this.finderPenaltyAddHistory(runY, runHistory);
             if (!runColor)
@@ -412,8 +395,7 @@ var qrcodegen;
     // Each position is in the range [0,177), and are used on both the x and y axes.
     // This could be implemented as lookup table of 40 variable-length lists of integers.
     getAlignmentPatternPositions() {
-      if (this.version == 1)
-        return [];
+      if (this.version == 1) return [];
       else {
         const numAlign = Math.floor(this.version / 7) + 2;
         const step = this.version == 32 ? 26 : Math.ceil((this.version * 4 + 4) / (numAlign * 2 - 2)) * 2;
@@ -433,8 +415,7 @@ var qrcodegen;
       if (ver >= 2) {
         const numAlign = Math.floor(ver / 7) + 2;
         result -= (25 * numAlign - 10) * numAlign - 55;
-        if (ver >= 7)
-          result -= 36;
+        if (ver >= 7) result -= 36;
       }
       assert(208 <= result && result <= 29648);
       return result;
@@ -448,18 +429,15 @@ var qrcodegen;
     // Returns a Reed-Solomon ECC generator polynomial for the given degree. This could be
     // implemented as a lookup table over all possible parameter values, instead of as an algorithm.
     static reedSolomonComputeDivisor(degree) {
-      if (degree < 1 || degree > 255)
-        throw "Degree out of range";
+      if (degree < 1 || degree > 255) throw "Degree out of range";
       let result = [];
-      for (let i = 0; i < degree - 1; i++)
-        result.push(0);
+      for (let i = 0; i < degree - 1; i++) result.push(0);
       result.push(1);
       let root = 1;
       for (let i = 0; i < degree; i++) {
         for (let j = 0; j < result.length; j++) {
           result[j] = _QrCode.reedSolomonMultiply(result[j], root);
-          if (j + 1 < result.length)
-            result[j] ^= result[j + 1];
+          if (j + 1 < result.length) result[j] ^= result[j + 1];
         }
         root = _QrCode.reedSolomonMultiply(root, 2);
       }
@@ -480,8 +458,7 @@ var qrcodegen;
     // Returns the product of the two given field elements modulo GF(2^8/0x11D). The arguments and result
     // are unsigned 8-bit integers. This could be implemented as a lookup table of 256*256 entries of uint8.
     static reedSolomonMultiply(x, y) {
-      if (x >>> 8 != 0 || y >>> 8 != 0)
-        throw "Byte out of range";
+      if (x >>> 8 != 0 || y >>> 8 != 0) throw "Byte out of range";
       let z = 0;
       for (let i = 7; i >= 0; i--) {
         z = z << 1 ^ (z >>> 7) * 285;
@@ -510,8 +487,7 @@ var qrcodegen;
     }
     // Pushes the given value to the front and drops the last value. A helper function for getPenaltyScore().
     finderPenaltyAddHistory(currentRunLength, runHistory) {
-      if (runHistory[0] == 0)
-        currentRunLength += this.size;
+      if (runHistory[0] == 0) currentRunLength += this.size;
       runHistory.pop();
       runHistory.unshift(currentRunLength);
     }
@@ -889,8 +865,7 @@ var qrcodegen;
   let QrCode = _QrCode;
   qrcodegen2.QrCode = QrCode;
   function appendBits(val, len, bb) {
-    if (len < 0 || len > 31 || val >>> len != 0)
-      throw "Value out of range";
+    if (len < 0 || len > 31 || val >>> len != 0) throw "Value out of range";
     for (let i = len - 1; i >= 0; i--)
       bb.push(val >>> i & 1);
   }
@@ -898,8 +873,7 @@ var qrcodegen;
     return (x >>> i & 1) != 0;
   }
   function assert(cond) {
-    if (!cond)
-      throw "Assertion error";
+    if (!cond) throw "Assertion error";
   }
   const _QrSegment = class _QrSegment {
     /*-- Constructor (low level) and fields --*/
@@ -910,8 +884,7 @@ var qrcodegen;
       this.mode = mode;
       this.numChars = numChars;
       this.bitData = bitData;
-      if (numChars < 0)
-        throw "Invalid argument";
+      if (numChars < 0) throw "Invalid argument";
       this.bitData = bitData.slice();
     }
     /*-- Static factory functions (mid level) --*/
@@ -920,8 +893,7 @@ var qrcodegen;
     // can be converted to UTF-8 bytes and encoded as a byte mode segment.
     static makeBytes(data) {
       let bb = [];
-      for (const b of data)
-        appendBits(b, 8, bb);
+      for (const b of data) appendBits(b, 8, bb);
       return new _QrSegment(_QrSegment.Mode.BYTE, data.length, bb);
     }
     // Returns a segment representing the given string of decimal digits encoded in numeric mode.
@@ -960,31 +932,25 @@ var qrcodegen;
     // Returns a new mutable list of zero or more segments to represent the given Unicode text string.
     // The result may use various segment modes and switch modes to optimize the length of the bit stream.
     static makeSegments(text) {
-      if (text == "")
-        return [];
-      else if (_QrSegment.isNumeric(text))
-        return [_QrSegment.makeNumeric(text)];
+      if (text == "") return [];
+      else if (_QrSegment.isNumeric(text)) return [_QrSegment.makeNumeric(text)];
       else if (_QrSegment.isAlphanumeric(text))
         return [_QrSegment.makeAlphanumeric(text)];
-      else
-        return [_QrSegment.makeBytes(_QrSegment.toUtf8ByteArray(text))];
+      else return [_QrSegment.makeBytes(_QrSegment.toUtf8ByteArray(text))];
     }
     // Returns a segment representing an Extended Channel Interpretation
     // (ECI) designator with the given assignment value.
     static makeEci(assignVal) {
       let bb = [];
-      if (assignVal < 0)
-        throw "ECI assignment value out of range";
-      else if (assignVal < 1 << 7)
-        appendBits(assignVal, 8, bb);
+      if (assignVal < 0) throw "ECI assignment value out of range";
+      else if (assignVal < 1 << 7) appendBits(assignVal, 8, bb);
       else if (assignVal < 1 << 14) {
         appendBits(2, 2, bb);
         appendBits(assignVal, 14, bb);
       } else if (assignVal < 1e6) {
         appendBits(6, 3, bb);
         appendBits(assignVal, 21, bb);
-      } else
-        throw "ECI assignment value out of range";
+      } else throw "ECI assignment value out of range";
       return new _QrSegment(_QrSegment.Mode.ECI, 0, bb);
     }
     // Tests whether the given string can be encoded as a segment in numeric mode.
@@ -1009,8 +975,7 @@ var qrcodegen;
       let result = 0;
       for (const seg of segs) {
         const ccbits = seg.mode.numCharCountBits(version);
-        if (seg.numChars >= 1 << ccbits)
-          return Infinity;
+        if (seg.numChars >= 1 << ccbits) return Infinity;
         result += 4 + ccbits + seg.bitData.length;
       }
       return result;
@@ -1020,8 +985,7 @@ var qrcodegen;
       str = encodeURI(str);
       let result = [];
       for (let i = 0; i < str.length; i++) {
-        if (str.charAt(i) != "%")
-          result.push(str.charCodeAt(i));
+        if (str.charAt(i) != "%") result.push(str.charCodeAt(i));
         else {
           result.push(Number.parseInt(str.substr(i + 1, 2), 16));
           i += 2;

package/es/icons/MenuOutlined.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/icons/MenuOutlined.js

@@ -0,0 +1,32 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode } from "vue";
+const _sfc_main = defineComponent({
+  name: "MenuOutlined"
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "4"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M3 7H45" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", { d: "M3 24H44" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", { d: "M3 41H45" }, null, -1);
+const _hoisted_5 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
+}
+const MenuOutlined = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  MenuOutlined as default
+};

package/es/icons/index.d.ts

@@ -65,6 +65,7 @@ export { default as LogOutlined } from './LogOutlined';
 export { default as MailOutlined } from './MailOutlined';
 export { default as LogoutOutlined } from './LogoutOutlined';
 export { default as MenuFoldOutlined } from './MenuFoldOutlined';
+export { default as MenuOutlined } from './MenuOutlined';
 export { default as MenuUnfoldOutlined } from './MenuUnfoldOutlined';
 export { default as MessageOutlined } from './MessageOutlined';
 export { default as MinusCircleOutlined } from './MinusCircleOutlined';

package/es/icons/index.js

@@ -65,47 +65,48 @@ import { default as default65 } from "./LogOutlined";
 import { default as default66 } from "./MailOutlined";
 import { default as default67 } from "./LogoutOutlined";
 import { default as default68 } from "./MenuFoldOutlined";
-import { default as default69 } from "./MenuUnfoldOutlined";
-import { default as default70 } from "./MessageOutlined";
-import { default as default71 } from "./MinusCircleOutlined";
-import { default as default72 } from "./MobileOutlined";
-import { default as default73 } from "./MoonOutlined";
-import { default as default74 } from "./MoreOutlined";
-import { default as default75 } from "./PauseFilled";
-import { default as default76 } from "./PieChartOutlined";
-import { default as default77 } from "./PlayFilled";
-import { default as default78 } from "./PlusCircleOutlined";
-import { default as default79 } from "./PlusOutlined";
-import { default as default80 } from "./PrinterOutlined";
-import { default as default81 } from "./ProtectOutlined";
-import { default as default82 } from "./QuestionCircleFilled";
-import { default as default83 } from "./QuestionCircleOutlined";
-import { default as default84 } from "./ReloadOutlined";
-import { default as default85 } from "./ResizeOutlined";
-import { default as default86 } from "./SearchOutlined";
-import { default as default87 } from "./SettingOutlined";
-import { default as default88 } from "./ShoppingOutlined";
-import { default as default89 } from "./SortOutlined";
-import { default as default90 } from "./StarFilled";
-import { default as default91 } from "./StepBackwardFilled";
-import { default as default92 } from "./StepForwardFilled";
-import { default as default93 } from "./SuitcaseOutlined";
-import { default as default94 } from "./SunOutlined";
-import { default as default95 } from "./SwapOutlined";
-import { default as default96 } from "./SyncOutlined";
-import { default as default97 } from "./TableOutlined";
-import { default as default98 } from "./TagOutlined";
-import { default as default99 } from "./TimerOutlined";
-import { default as default100 } from "./UndoOutlined";
-import { default as default101 } from "./UnlockOutlined";
-import { default as default102 } from "./UploadOutlined";
-import { default as default103 } from "./UserOutlined";
-import { default as default104 } from "./VerticalAlignMiddleOutlined";
-import { default as default105 } from "./VerticalLeftOutlined";
-import { default as default106 } from "./VerticalRightOutlined";
-import { default as default107 } from "./WarningOutlined";
-import { default as default108 } from "./ZoomInOutlined";
-import { default as default109 } from "./ZoomOutOutlined";
+import { default as default69 } from "./MenuOutlined";
+import { default as default70 } from "./MenuUnfoldOutlined";
+import { default as default71 } from "./MessageOutlined";
+import { default as default72 } from "./MinusCircleOutlined";
+import { default as default73 } from "./MobileOutlined";
+import { default as default74 } from "./MoonOutlined";
+import { default as default75 } from "./MoreOutlined";
+import { default as default76 } from "./PauseFilled";
+import { default as default77 } from "./PieChartOutlined";
+import { default as default78 } from "./PlayFilled";
+import { default as default79 } from "./PlusCircleOutlined";
+import { default as default80 } from "./PlusOutlined";
+import { default as default81 } from "./PrinterOutlined";
+import { default as default82 } from "./ProtectOutlined";
+import { default as default83 } from "./QuestionCircleFilled";
+import { default as default84 } from "./QuestionCircleOutlined";
+import { default as default85 } from "./ReloadOutlined";
+import { default as default86 } from "./ResizeOutlined";
+import { default as default87 } from "./SearchOutlined";
+import { default as default88 } from "./SettingOutlined";
+import { default as default89 } from "./ShoppingOutlined";
+import { default as default90 } from "./SortOutlined";
+import { default as default91 } from "./StarFilled";
+import { default as default92 } from "./StepBackwardFilled";
+import { default as default93 } from "./StepForwardFilled";
+import { default as default94 } from "./SuitcaseOutlined";
+import { default as default95 } from "./SunOutlined";
+import { default as default96 } from "./SwapOutlined";
+import { default as default97 } from "./SyncOutlined";
+import { default as default98 } from "./TableOutlined";
+import { default as default99 } from "./TagOutlined";
+import { default as default100 } from "./TimerOutlined";
+import { default as default101 } from "./UndoOutlined";
+import { default as default102 } from "./UnlockOutlined";
+import { default as default103 } from "./UploadOutlined";
+import { default as default104 } from "./UserOutlined";
+import { default as default105 } from "./VerticalAlignMiddleOutlined";
+import { default as default106 } from "./VerticalLeftOutlined";
+import { default as default107 } from "./VerticalRightOutlined";
+import { default as default108 } from "./WarningOutlined";
+import { default as default109 } from "./ZoomInOutlined";
+import { default as default110 } from "./ZoomOutOutlined";
 export {
   default2 as AnalysisOutlined,
   default3 as ApplicationOutlined,
@@ -174,45 +175,46 @@ export {
   default67 as LogoutOutlined,
   default66 as MailOutlined,
   default68 as MenuFoldOutlined,
-  default69 as MenuUnfoldOutlined,
-  default70 as MessageOutlined,
-  default71 as MinusCircleOutlined,
-  default72 as MobileOutlined,
-  default73 as MoonOutlined,
-  default74 as MoreOutlined,
-  default75 as PauseFilled,
-  default76 as PieChartOutlined,
-  default77 as PlayFilled,
-  default78 as PlusCircleOutlined,
-  default79 as PlusOutlined,
-  default80 as PrinterOutlined,
-  default81 as ProtectOutlined,
-  default82 as QuestionCircleFilled,
-  default83 as QuestionCircleOutlined,
-  default84 as ReloadOutlined,
-  default85 as ResizeOutlined,
-  default86 as SearchOutlined,
-  default87 as SettingOutlined,
-  default88 as ShoppingOutlined,
-  default89 as SortOutlined,
-  default90 as StarFilled,
-  default91 as StepBackwardFilled,
-  default92 as StepForwardFilled,
-  default93 as SuitcaseOutlined,
-  default94 as SunOutlined,
-  default95 as SwapOutlined,
-  default96 as SyncOutlined,
-  default97 as TableOutlined,
-  default98 as TagOutlined,
-  default99 as TimerOutlined,
-  default100 as UndoOutlined,
-  default101 as UnlockOutlined,
-  default102 as UploadOutlined,
-  default103 as UserOutlined,
-  default104 as VerticalAlignMiddleOutlined,
-  default105 as VerticalLeftOutlined,
-  default106 as VerticalRightOutlined,
-  default107 as WarningOutlined,
-  default108 as ZoomInOutlined,
-  default109 as ZoomOutOutlined
+  default69 as MenuOutlined,
+  default70 as MenuUnfoldOutlined,
+  default71 as MessageOutlined,
+  default72 as MinusCircleOutlined,
+  default73 as MobileOutlined,
+  default74 as MoonOutlined,
+  default75 as MoreOutlined,
+  default76 as PauseFilled,
+  default77 as PieChartOutlined,
+  default78 as PlayFilled,
+  default79 as PlusCircleOutlined,
+  default80 as PlusOutlined,
+  default81 as PrinterOutlined,
+  default82 as ProtectOutlined,
+  default83 as QuestionCircleFilled,
+  default84 as QuestionCircleOutlined,
+  default85 as ReloadOutlined,
+  default86 as ResizeOutlined,
+  default87 as SearchOutlined,
+  default88 as SettingOutlined,
+  default89 as ShoppingOutlined,
+  default90 as SortOutlined,
+  default91 as StarFilled,
+  default92 as StepBackwardFilled,
+  default93 as StepForwardFilled,
+  default94 as SuitcaseOutlined,
+  default95 as SunOutlined,
+  default96 as SwapOutlined,
+  default97 as SyncOutlined,
+  default98 as TableOutlined,
+  default99 as TagOutlined,
+  default100 as TimerOutlined,
+  default101 as UndoOutlined,
+  default102 as UnlockOutlined,
+  default103 as UploadOutlined,
+  default104 as UserOutlined,
+  default105 as VerticalAlignMiddleOutlined,
+  default106 as VerticalLeftOutlined,
+  default107 as VerticalRightOutlined,
+  default108 as WarningOutlined,
+  default109 as ZoomInOutlined,
+  default110 as ZoomOutOutlined
 };

package/es/utils/message-box.js

@@ -1,7 +1,8 @@
-import { getCurrentInstance, onActivated, onDeactivated } from "vue";
+import { getCurrentInstance, onActivated, onDeactivated, onBeforeUnmount, h } from "vue";
 import { ElMessageBox } from "element-plus";
 import { useGlobalProps } from "../ele-config-provider/receiver";
 import { useLayoutState } from "../ele-pro-layout/util";
+import MessageBoxIcon from "../ele-app/components/message-box-icon";
 import { omit } from "./core";
 function getWrapEl(bodyEl) {
   const parent = bodyEl || document.body;
@@ -16,7 +17,8 @@ function useMessageBox(globalOpt) {
   const layoutState = useLayoutState();
   const globalProps = useGlobalProps("messageBox");
   const appContext = (_b = (_a = getCurrentInstance) == null ? void 0 : _a()) == null ? void 0 : _b.appContext;
-  const state = { wrapEl: null, isActivated: true };
+  const state = { wrapEl: null, isActivated: true, id: 0 };
+  const instances = /* @__PURE__ */ new Map();
   const hideClass = "is-hide";
   onActivated(() => {
     state.isActivated = true;
@@ -26,7 +28,15 @@ function useMessageBox(globalOpt) {
     state.isActivated = false;
     state.wrapEl && state.wrapEl.classList.add(hideClass);
   });
+  onBeforeUnmount(() => {
+    for (const [_key, insDoClose] of instances) {
+      insDoClose && insDoClose();
+    }
+    instances.clear();
+  });
   const getOption = (options) => {
+    state.id++;
+    const msgId = `m_${state.id}`;
     const opt = {
       ...globalProps.value || {},
       ...globalOpt || {},
@@ -41,6 +51,22 @@ function useMessageBox(globalOpt) {
       }
       opt.lockScroll = false;
     }
+    const classes = ["ele-message-box"];
+    if (opt.customClass) {
+      classes.push(opt.customClass);
+    }
+    opt.customClass = classes.join(" ");
+    opt.icon = h(MessageBoxIcon, {
+      type: opt.type,
+      icon: opt.icon,
+      boxId: msgId,
+      onBoxDestroy: (boxId) => {
+        boxId && instances.delete(boxId);
+      },
+      onBoxMounted: ({ boxId, doClose }) => {
+        boxId && instances.set(boxId, doClose);
+      }
+    });
     return omit(opt, ["inner"]);
   };
   const messageBox = function(options) {