@nutui/nutui-react 2.0.0-alpha.11 → 2.0.0-alpha.12

package/dist/esm/ShortPassword.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["title", "description", "tips", "tipsIcon", "iconSize", "visible", "modelValue", "errorMsg", "noButton", "closeOnClickOverlay", "length", "style", "className", "onChange", "onOk", "onTips", "onCancel", "onClose", "onComplete", "autoFocus"];
+var _excluded = ["title", "description", "tips", "visible", "value", "error", "hideFooter", "length", "plain", "style", "className", "closeable", "autoFocus", "onFocus", "onChange", "onConfirm", "onTips", "onCancel", "onClose", "onComplete", "onClickOverlay", "onClickCloseIcon"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,171 +24,103 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useRef, useState, useEffect } from "react";
+import React__default, { useMemo, useEffect } from "react";
 import { Tips } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
+import classNames from "classnames";
 import Popup from "./Popup.js";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
+import { u as usePropsValue } from "./use-props-value.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: "",
-  description: "",
-  tips: "",
-  tipsIcon: null,
-  iconSize: 11,
+  value: "",
   visible: false,
-  modelValue: "",
-  errorMsg: "",
-  noButton: true,
-  closeOnClickOverlay: true,
+  plain: false,
+  hideFooter: true,
   length: 6,
-  className: "",
-  autoFocus: false,
-  onChange: function onChange(value) {
-  },
-  onOk: function onOk(value) {
-  },
-  onCancel: function onCancel() {
-  },
-  onClose: function onClose() {
-  },
-  onTips: function onTips() {
-  },
-  onComplete: function onComplete(value) {
-  }
+  autoFocus: false
 });
 var ShortPassword = function ShortPassword2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var title = props.title, description = props.description, tips = props.tips, tipsIcon = props.tipsIcon, iconSize = props.iconSize, visible = props.visible, modelValue = props.modelValue, errorMsg = props.errorMsg, noButton = props.noButton, closeOnClickOverlay = props.closeOnClickOverlay, length = props.length, style = props.style, className = props.className, onChange2 = props.onChange, onOk2 = props.onOk, onTips2 = props.onTips, onCancel2 = props.onCancel, onClose2 = props.onClose, onComplete2 = props.onComplete, autoFocus = props.autoFocus, reset = _objectWithoutProperties(props, _excluded);
-  var b = cn("shortpassword");
-  var textInput = useRef(null);
-  var range = function range2(val) {
-    return Math.min(Math.max(4, val), 6);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), title = _defaultProps$props.title, description = _defaultProps$props.description, tips = _defaultProps$props.tips, visible = _defaultProps$props.visible, value = _defaultProps$props.value, error = _defaultProps$props.error, hideFooter = _defaultProps$props.hideFooter, length = _defaultProps$props.length, plain = _defaultProps$props.plain, style = _defaultProps$props.style, className = _defaultProps$props.className, closeable = _defaultProps$props.closeable, autoFocus = _defaultProps$props.autoFocus, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, onConfirm = _defaultProps$props.onConfirm, onTips = _defaultProps$props.onTips, onCancel = _defaultProps$props.onCancel, onClose = _defaultProps$props.onClose, onComplete = _defaultProps$props.onComplete, onClickOverlay = _defaultProps$props.onClickOverlay, onClickCloseIcon = _defaultProps$props.onClickCloseIcon, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-shortpassword";
+  var comLen = useMemo(function() {
+    return Math.min(Math.max(4, length || 4), 6);
+  }, [length]);
+  var format = function format2(val) {
+    return val.slice(0, comLen);
   };
-  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), innerVisible = _useState2[0], setInnerVisible = _useState2[1];
-  var _useState3 = useState(range(Number(length))), _useState4 = _slicedToArray(_useState3, 2), comLen = _useState4[0], setComLen = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), inputValue = _useState6[0], setInputValue = _useState6[1];
+  var _usePropsValue = usePropsValue({
+    value,
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), inputValue = _usePropsValue2[0], setInputValue = _usePropsValue2[1];
   useEffect(function() {
-    setInnerVisible(visible);
+    if (visible && autoFocus) {
+      onFocus && onFocus();
+    }
   }, [visible]);
   useEffect(function() {
-    if (typeof modelValue !== "undefined") {
-      setInputValue(modelValue);
-    }
-  }, [modelValue]);
-  var changeValue = function changeValue2(e) {
-    var inputValue2 = e.target.value;
-    if (String(inputValue2).length > comLen) {
-      inputValue2 = inputValue2.slice(0, comLen);
-    }
-    setInputValue(inputValue2);
-    if (String(inputValue2).length === comLen) {
-      onComplete2 && onComplete2(inputValue2);
-    }
-    onChange2 && onChange2(inputValue2);
-  };
-  var systemStyle = function systemStyle2() {
-    var u = navigator.userAgent;
-    var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
-    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-    var style2 = {};
-    if (isIOS) {
-      style2 = {
-        paddingRight: "1200px"
-      };
-    }
-    if (isAndroid) {
-      style2 = {
-        opacity: 0,
-        zIndex: 10
-      };
+    var val = format(value);
+    if (val.length >= comLen) {
+      onComplete && onComplete(val);
     }
-    return style2;
-  };
-  var focus = function focus2() {
-    if (textInput.current) {
-      textInput.current.focus();
-    }
-  };
+    setInputValue(format(value));
+  }, [value]);
   var sure = function sure2() {
-    onOk2 && onOk2(inputValue);
+    onConfirm && onConfirm(inputValue);
   };
-  var renderIcon = function renderIcon2() {
-    var size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "11px";
-    return React__default.isValidElement(tipsIcon) ? React__default.cloneElement(tipsIcon, _objectSpread(_objectSpread({}, tipsIcon.props), {}, {
-      width: size,
-      height: size
-    })) : React__default.createElement(Tips, {
-      width: size,
-      height: size
-    });
-  };
-  return React__default.createElement("div", null, React__default.createElement(Popup, {
+  return React__default.createElement(Popup, _objectSpread({
     style: {
       padding: "32px 24px 28px 24px",
       borderRadius: "12px",
       textAlign: "center"
     },
-    visible: innerVisible,
+    visible,
     closeable: true,
-    "close-on-click-overlay": closeOnClickOverlay,
-    onClickOverlay: onClose2,
-    onClickCloseIcon: onClose2
-  }, React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className),
-    style: _objectSpread({}, style)
-  }, reset), React__default.createElement("div", {
-    className: b("title")
+    onClickOverlay: onClose,
+    onClickCloseIcon: onClose
+  }, rest), React__default.createElement("div", {
+    className: classNames(className, classPrefix),
+    style
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__title")
   }, title || locale.shortpassword.title), React__default.createElement("div", {
-    className: b("subtitle")
+    className: "".concat(classPrefix, "__description")
   }, description || locale.shortpassword.description), React__default.createElement("div", {
-    className: b("input")
-  }, React__default.createElement("input", {
-    ref: textInput,
-    className: b("input-real"),
-    type: "number",
-    style: systemStyle(),
-    maxLength: 6,
-    value: inputValue,
-    autoFocus,
-    onChange: function onChange3(e) {
-      return changeValue(e);
-    }
-  }), React__default.createElement("div", {
-    className: b("input-site")
+    className: "".concat(classPrefix, "__input"),
+    onClick: onFocus
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__input-site")
   }), React__default.createElement("div", {
-    className: b("input-fake"),
-    onClick: function onClick() {
-      return focus();
-    }
+    className: "".concat(classPrefix, "__input-fake")
   }, _toConsumableArray(new Array(comLen).keys()).map(function(item, index) {
     return React__default.createElement("div", {
-      className: b("input-fake__li"),
+      className: "".concat(classPrefix, "__input-fake__li"),
       key: index
-    }, String(inputValue).length > index ? React__default.createElement("div", {
-      className: b("input-fake__li__icon")
-    }) : null);
+    }, inputValue.length > index && React__default.createElement(React__default.Fragment, null, plain ? inputValue[index] : React__default.createElement("div", {
+      className: "".concat(classPrefix, "__input-fake__li__icon")
+    })));
   }))), React__default.createElement("div", {
-    className: b("message")
+    className: "".concat(classPrefix, "__message")
   }, React__default.createElement("div", {
-    className: b("message__error")
-  }, errorMsg), tips || locale.shortpassword.tips ? React__default.createElement("div", {
-    className: b("message__forget")
-  }, renderIcon(iconSize), React__default.createElement("div", {
-    className: b("message__forget-tips"),
-    onClick: onTips2
-  }, tips || locale.shortpassword.tips)) : null), !noButton ? React__default.createElement("div", {
-    className: b("footer")
+    className: "".concat(classPrefix, "__message__error")
+  }, error), React__default.createElement("div", {
+    className: "".concat(classPrefix, "__message__forget"),
+    onClick: onTips
+  }, tips || React__default.createElement(React__default.Fragment, null, React__default.createElement(Tips, {
+    width: 11,
+    height: 11,
+    style: {
+      marginRight: "3px"
+    }
+  }), locale.shortpassword.tips))), !hideFooter && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__footer")
   }, React__default.createElement("div", {
-    className: b("footer__cancel"),
-    onClick: onCancel2
+    className: "".concat(classPrefix, "__footer__cancel"),
+    onClick: onCancel
   }, locale.cancel), React__default.createElement("div", {
-    className: b("footer__sure"),
-    onClick: function onClick() {
-      return sure();
-    }
-  }, locale.confirm)) : null)));
+    className: "".concat(classPrefix, "__footer__sure"),
+    onClick: sure
+  }, locale.confirm))));
 };
 ShortPassword.defaultProps = defaultProps;
 ShortPassword.displayName = "NutShortPassword";

package/dist/esm/Toast/style/style.css

@@ -1 +1 @@
-@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.nut-toast{position:fixed;left:0;bottom:150px;width:100%;text-align:center;pointer-events:none;z-index:9999}.nut-toast-small .nut-toast__inner{font-size:var(--nutui-font-size-1, 12px)}.nut-toast-large .nut-toast__inner{font-size:var(--nutui-font-size-3, 16px)}.nut-toast-cover{display:flex;align-items:center;justify-content:center;pointer-events:auto;height:100%;background:var(--nutui-toast-cover-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-toast__inner{display:inline-block;font-size:var(--nutui-toast-text-font-size, 14px);min-width:40%;max-width:65%;text-align:center;padding:var(--nutui-toast-inner-padding, 24px 30px);word-break:break-all;background:var(--nutui-toast-inner-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, 12px);color:var(--nutui-toast-font-color, #fff)}.nut-toast-text{font-size:var(--nutui-toast-text-font-size, 14px)}.nut-toast-text:empty{margin-bottom:-8px}.nut-toast-title{font-size:var(--nutui-toast-title-font-size, 16px)}.nut-toast-title:empty{margin-bottom:-8px}.nut-toast-has-icon .nut-toast__icon-wrapper{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.nut-toast-center{top:50%;transform:translateY(-50%)}.nut-toast-loading .nut-toast__inner{display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.nut-toast-loading .nut-toast__icon-wrapper{animation:rotation 2s linear infinite}.toast-fade-enter-active,.toast-fade-leave-active{transition:opacity .3s}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0}
+@keyframes rotation{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.nut-toast{position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;pointer-events:none;z-index:9999}.nut-toast__overlay-default{--nutui-overlay-bg-color: rgba(0, 0, 0, 0)}.nut-toast-small .nut-toast__inner{font-size:var(--nutui-font-size-1, 12px)}.nut-toast-large .nut-toast__inner{font-size:var(--nutui-font-size-3, 16px)}.nut-toast-cover{display:flex;align-items:center;justify-content:center;pointer-events:none;height:100%;background:var(--nutui-toast-cover-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-toast__inner{display:inline-block;font-size:var(--nutui-toast-text-font-size, 14px);min-width:40%;max-width:65%;text-align:var(--nutui-toast-inner-text-align, "center");padding:var(--nutui-toast-inner-padding, 24px 30px);word-break:break-all;background:var(--nutui-toast-inner-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)));border-radius:var(--nutui-toast-inner-border-radius, 12px);color:var(--nutui-toast-font-color, #fff);position:absolute;left:50%;top:var(--nutui-toast-inner-top, 50%);transform:translate(-50%,-50%)}.nut-toast-center{top:var(--nutui-toast-inner-top, 50%)}.nut-toast-bottom{top:var(--nutui-toast-inner-top, 80%)}.nut-toast-top{top:var(--nutui-toast-inner-top, 20%)}.nut-toast-text{font-size:var(--nutui-toast-text-font-size, 14px)}.nut-toast-text:empty{margin-bottom:-8px}.nut-toast-title{font-size:var(--nutui-toast-title-font-size, 16px)}.nut-toast-title:empty{margin-bottom:-8px}.nut-toast-has-icon .nut-toast__icon-wrapper{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.nut-toast-loading .nut-toast__inner{display:inline-flex;flex-direction:column;justify-content:center;align-items:center}.nut-toast-loading .nut-toast__icon-wrapper{animation:rotation 2s linear infinite}.toast-fade-enter-active,.toast-fade-leave-active{transition:opacity .3s}.toast-fade-enter-from,.toast-fade-leave-to{opacity:0}

package/dist/esm/Toast.js

@@ -56,11 +56,12 @@ function _isNativeReflectConstruct() {
 }
 import * as React from "react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { r as render, u as unmount } from "./render.js";
-import { Loading } from "@nutui/icons-react";
-import "@bem-react/classname";
+import { O as Overlay } from "./overlay2.js";
+import { Issue, Failure, Loading, Check } from "@nutui/icons-react";
+import { C as ComponentDefaults } from "./typings.js";
 import "react-dom";
+var classPrefix = "nut-toast";
 var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   _inherits(Notification2, _React$PureComponent);
   var _super = _createSuper(Notification2);
@@ -104,11 +105,39 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   }, {
     key: "clickCover",
     value: function clickCover() {
-      var closeOnClickOverlay = this.props.closeOnClickOverlay;
-      if (closeOnClickOverlay) {
+      var closeOnOverlayClick = this.props.closeOnOverlayClick;
+      if (closeOnOverlayClick) {
         this.close();
       }
     }
+  }, {
+    key: "renderIcon",
+    value: function renderIcon() {
+      var icon = this.props.icon;
+      if (typeof icon === "string") {
+        var iconNode = null;
+        switch (icon) {
+          case "success":
+            iconNode = React.createElement(Check, null);
+            break;
+          case "loading":
+            iconNode = React.createElement(Loading, {
+              className: "nut-icon-loading"
+            });
+            break;
+          case "fail":
+            iconNode = React.createElement(Failure, null);
+            break;
+          case "warn":
+            iconNode = React.createElement(Issue, null);
+            break;
+        }
+        return React.createElement("p", {
+          className: "".concat(classPrefix, "__icon-wrapper")
+        }, iconNode);
+      }
+      return icon;
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -122,38 +151,31 @@ var Notification = /* @__PURE__ */ function(_React$PureComponent) {
   }, {
     key: "render",
     value: function render2() {
-      var _classNames, _this3 = this;
-      var _this$props = this.props, id = _this$props.id, style = _this$props.style, icon = _this$props.icon, title = _this$props.title, msg = _this$props.msg, bottom = _this$props.bottom, center = _this$props.center, bgColor = _this$props.bgColor, coverColor = _this$props.coverColor, textAlignCenter = _this$props.textAlignCenter, size = _this$props.size, customClass = _this$props.customClass, cover = _this$props.cover, type = _this$props.type;
-      var toastBem = cn("toast");
-      var classes = classNames((_classNames = {
-        "nut-toast-center": center,
-        "nut-toast-has-icon": icon,
-        "nut-toast-cover": cover,
-        "nut-toast-loading": type === "loading"
-      }, _defineProperty(_classNames, "".concat(customClass), true), _defineProperty(_classNames, "nut-toast-".concat(size), true), _classNames));
-      return React.createElement(React.Fragment, null, React.createElement("div", {
-        className: "".concat(toastBem(), " ").concat(classes),
-        id: "toast-".concat(id),
-        style: _objectSpread({
-          bottom: center ? "auto" : "".concat(bottom),
-          backgroundColor: cover ? coverColor : ""
-        }, style),
+      var _this3 = this;
+      var _this$props = this.props, id = _this$props.id, icon = _this$props.icon, title = _this$props.title, content = _this$props.content, position = _this$props.position, size = _this$props.size, closeOnOverlayClick = _this$props.closeOnOverlayClick, style = _this$props.style, className = _this$props.className, contentClassName = _this$props.contentClassName, contentStyle = _this$props.contentStyle;
+      var classes = classNames(_defineProperty({
+        "nut-toast-has-icon": icon
+      }, "nut-toast-".concat(size), true));
+      return React.createElement(React.Fragment, null, React.createElement(Overlay, {
+        visible: true,
+        style,
+        className: "".concat(classPrefix, "__overlay-default ").concat(className),
         onClick: function onClick() {
+          console.log("onclick");
           _this3.clickCover();
-        }
+        },
+        closeOnOverlayClick
       }, React.createElement("div", {
-        className: toastBem("inner"),
-        style: {
-          textAlign: textAlignCenter ? "center" : "left",
-          backgroundColor: bgColor
-        }
-      }, icon ? React.createElement("p", {
-        className: toastBem("icon-wrapper")
-      }, icon) : null, title ? React.createElement("div", {
-        className: "nut-toast-title"
+        className: "".concat(classPrefix, " ").concat(classes),
+        id: "toast-".concat(id)
+      }, React.createElement("div", {
+        className: "".concat(classPrefix, "__inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName),
+        style: contentStyle
+      }, this.renderIcon(), title ? React.createElement("div", {
+        className: "".concat(classPrefix, "-title")
       }, title) : null, React.createElement("span", {
-        className: toastBem("text")
-      }, msg))));
+        className: "".concat(classPrefix, "-text")
+      }, content)))));
     }
   }]);
   return Notification2;
@@ -184,29 +206,18 @@ Notification.newInstance = function(properties, callback) {
   })), element);
 };
 var messageInstance = null;
-var options = {
-  msg: "",
+var options = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   id: "",
-  style: {},
-  duration: 1.5,
-  center: true,
-  type: "text",
+  duration: 2,
+  position: "center",
   title: "",
-  customClass: "",
-  bottom: "30px",
   size: "base",
   icon: null,
-  iconSize: "20",
-  textAlignCenter: true,
-  loadingRotate: true,
-  bgColor: "rgba(0, 0, 0, .8)",
   onClose: function onClose() {
   },
-  cover: false,
-  coverColor: "rgba(0, 0, 0, 0)",
-  closeOnClickOverlay: false
-  // 是否点击遮罩可关闭
-};
+  closeOnOverlayClick: false,
+  contentClassName: ""
+});
 function getInstance(props, callback) {
   if (messageInstance) {
     messageInstance.destroy();
@@ -221,6 +232,7 @@ function notice(opts) {
     if (messageInstance) {
       messageInstance.destroy();
       messageInstance = null;
+      opts.onClose && opts.onClose();
     }
   }
   var opts2 = _objectSpread(_objectSpread(_objectSpread({}, options), opts), {}, {
@@ -235,59 +247,31 @@ var errorMsg = function errorMsg2(msg) {
     console.warn("[NutUI Toast]: msg cannot be null");
   }
 };
+function show(option) {
+  if (typeof option === "string") {
+    errorMsg(option);
+    return notice({
+      content: option
+    });
+  }
+  errorMsg(option.content);
+  return notice(_objectSpread({}, option));
+}
+function config(config2) {
+  if (config2.duration !== void 0) {
+    options.duration = config2.duration;
+  }
+  if (config2.position !== void 0) {
+    options.position = config2.position;
+  }
+  if (config2.closeOnOverlayClick !== void 0) {
+    options.closeOnOverlayClick = config2.closeOnOverlayClick;
+  }
+}
 var Toast = {
-  text: function text(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      type: "text"
-    }, option));
-  },
-  success: function success(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "success",
-      type: "success"
-    }, option));
-  },
-  fail: function fail(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "failure",
-      type: "fail"
-    }, option));
-  },
-  loading: function loading(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: React.createElement(Loading, null),
-      type: "loading"
-    }, option));
-  },
-  warn: function warn(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg,
-      icon: "tips",
-      type: "warn"
-    }, option));
-  },
-  customIcon: function customIcon(msg) {
-    var option = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    errorMsg(msg);
-    return notice(_objectSpread({
-      msg
-    }, option));
-  },
-  hide: function hide() {
+  show,
+  config,
+  clear: function clear() {
     if (messageInstance) {
       messageInstance.destroy();
       messageInstance = null;

package/dist/esm/VirtualList/style/style.css

@@ -1 +1 @@
-.nut-theme-dark .nut-virtualList-demo-box li{background-color:#141414;color:#e6e6e6}.nut-theme-dark .nut-virtualList-demo-box .nut-vertical-items li{box-shadow:0 1px 6px #141414}.nut-horizontal-items{float:left}.nut-horizontal-items li{display:block;float:left;background:var(--nutui-gray-6, #ffffff);padding:10px;margin-right:20px}.nut-horizontal-items:after{content:"";display:block;visibility:hidden;clear:both}.nut-vertical-items li{display:block;background:var(--nutui-gray-6, #ffffff);border-radius:7px;box-shadow:0 1px 6px #edeef1;margin-top:20px;padding:14px 15px;font-size:13px;line-height:18px;font-family:PingFangSC;font-weight:500;color:var(--nutui-gray-1, #1a1a1a)}.nut-virtualList-demo-item{height:100px}.nut-virtualList-box{overflow:auto}.nut-virtualList-demo-box .heigh1{height:500px}.nut-virtualList-demo-box.hideScrollbar .nut-virtualList-box::-webkit-scrollbar{width:0px;height:0px}.nut-virtuallist{width:100%;overflow:scroll;position:relative;-webkit-overflow-scrolling:touch}.nut-virtuallist-phantom{position:absolute;left:0;top:0;right:0;z-index:-1}.nut-virtuallist-container{left:0;right:0;top:0;position:absolute}.nut-virtuallist-item{overflow:hidden;margin:var(--nutui-list-item-margin, 0 0 10px 0)}
+.nut-horizontal-items{float:left}.nut-horizontal-items li{display:block;float:left;background:var(--nutui-gray-6, #ffffff);padding:10px;margin-right:20px}.nut-horizontal-items:after{content:"";display:block;visibility:hidden;clear:both}.nut-vertical-items li{display:block;background:var(--nutui-gray-6, #ffffff);border-radius:7px;box-shadow:0 1px 6px #edeef1;margin-top:20px;padding:14px 15px;font-size:13px;line-height:18px;font-family:PingFangSC;font-weight:500;color:var(--nutui-gray-1, #1a1a1a)}.nut-virtualList-demo-item{height:100px}.nut-virtualList-box{overflow:auto}.nut-virtualList-demo-box .heigh1{height:500px}.nut-virtualList-demo-box.hideScrollbar .nut-virtualList-box::-webkit-scrollbar{width:0px;height:0px}.nut-virtuallist{width:100%;overflow:scroll;position:relative;-webkit-overflow-scrolling:touch}.nut-virtuallist-phantom{position:absolute;left:0;top:0;right:0;z-index:-1}.nut-virtuallist-container{left:0;right:0;top:0;position:absolute}.nut-virtuallist-item{overflow:hidden;margin:var(--nutui-list-item-margin, 0 0 10px 0)}