@arco-design/mobile-react 2.19.1-7cada34.0 → 2.19.2-ee92494.5

package/tokens/app/arcodesign/default/index.json

@@ -3359,6 +3359,198 @@
             "en": "Default mask background color when image loads or retries"
         }
     },
+    "imagePickerAddBackground": {
+        "cssKey": "image-picker-add-background",
+        "desc": "图片选择器添加图片按钮的背景色",
+        "override": "",
+        "value": "#f7f8fa",
+        "jsValue": "#f7f8fa",
+        "staticValue": "#f7f8fa",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的背景色",
+            "en": "Background of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddIconColor": {
+        "cssKey": "image-picker-add-icon-color",
+        "desc": "图片选择器添加图片按钮的图标颜色",
+        "override": "",
+        "value": "#d8d8d8",
+        "jsValue": "#d8d8d8",
+        "staticValue": "#d8d8d8",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标颜色",
+            "en": "Icon color of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddIconFontSize": {
+        "cssKey": "image-picker-add-icon-font-size",
+        "desc": "图片选择器添加图片按钮的图标大小",
+        "override": "",
+        "value": "~`pxtorem(30)`",
+        "jsValue": "@getRem@30",
+        "staticValue": "0.6rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的图标大小",
+            "en": "Icon size of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddTextColor": {
+        "cssKey": "image-picker-add-text-color",
+        "desc": "图片选择器添加图片按钮的字体颜色",
+        "override": "",
+        "value": "@sub-info-font-color",
+        "jsValue": "@global@subInfoFontColor",
+        "staticValue": "#86909c",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体颜色",
+            "en": "Font color of the add button of ImagePicker"
+        }
+    },
+    "imagePickerAddTextFontSize": {
+        "cssKey": "image-picker-add-text-font-size",
+        "desc": "图片选择器添加图片按钮的字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器添加图片按钮的字体大小",
+            "en": "Font size of the add button of ImagePicker"
+        }
+    },
+    "imagePickerBorderRadius": {
+        "cssKey": "image-picker-border-radius",
+        "desc": "图片选择器中图片的圆角值",
+        "override": "",
+        "value": "~`pxtorem(2)`",
+        "jsValue": "@getRem@2",
+        "staticValue": "0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器中图片的圆角值",
+            "en": "Border radius of the image in ImagePicker"
+        }
+    },
+    "imagePickerCloseBackground": {
+        "cssKey": "image-picker-close-background",
+        "desc": "图片选择器关闭按钮背景色",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.3)",
+        "jsValue": "rgba(0, 0, 0, 0.3)",
+        "staticValue": "rgba(0, 0, 0, 0.3)",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮背景色",
+            "en": "Background of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseBorderRadius": {
+        "cssKey": "image-picker-close-border-radius",
+        "desc": "图片选择器关闭按钮圆角值",
+        "override": "",
+        "value": "0 ~`pxtorem(2)`",
+        "jsValue": "0 @getRem@2",
+        "staticValue": "0 0.04rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮圆角值",
+            "en": "Border radius of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseColor": {
+        "cssKey": "image-picker-close-color",
+        "desc": "图片选择器关闭按钮字体颜色",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体颜色",
+            "en": "Font color of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseFontSize": {
+        "cssKey": "image-picker-close-font-size",
+        "desc": "图片选择器关闭按钮字体大小",
+        "override": "",
+        "value": "~`pxtorem(12)`",
+        "jsValue": "@getRem@12",
+        "staticValue": "0.24rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮字体大小",
+            "en": "Font size of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseHeight": {
+        "cssKey": "image-picker-close-height",
+        "desc": "图片选择器关闭按钮高度",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮高度",
+            "en": "Height of the close button of ImagePicker"
+        }
+    },
+    "imagePickerCloseWidth": {
+        "cssKey": "image-picker-close-width",
+        "desc": "图片选择器关闭按钮宽度",
+        "override": "",
+        "value": "~`pxtorem(18)`",
+        "jsValue": "@getRem@18",
+        "staticValue": "0.36rem",
+        "localeDesc": {
+            "ch": "图片选择器关闭按钮宽度",
+            "en": "Width of the close button of ImagePicker"
+        }
+    },
+    "imagePickerDisabledOpacity": {
+        "cssKey": "image-picker-disabled-opacity",
+        "desc": "图片选择器禁用状态下的透明度",
+        "override": "",
+        "value": "0.7",
+        "jsValue": "0.7",
+        "staticValue": "0.7",
+        "localeDesc": {
+            "ch": "图片选择器禁用状态下的透明度",
+            "en": "Opacity of disabled ImagePicker"
+        }
+    },
+    "imagePickerErrorBackground": {
+        "cssKey": "image-picker-error-background",
+        "desc": "图片选择器中图片错误状态下的背景色",
+        "override": "",
+        "value": "rgba(0, 0, 0, 0.5)",
+        "jsValue": "rgba(0, 0, 0, 0.5)",
+        "staticValue": "rgba(0, 0, 0, 0.5)",
+        "localeDesc": {
+            "ch": "图片选择器中图片错误状态下的背景色",
+            "en": "Background for image error state in the image picker"
+        }
+    },
+    "imagePickerErrorColor": {
+        "cssKey": "image-picker-error-color",
+        "desc": "图片选择器中图片错误状态下的文字颜色",
+        "override": "",
+        "value": "#ffffff",
+        "jsValue": "#ffffff",
+        "staticValue": "#ffffff",
+        "localeDesc": {
+            "ch": "图片选择器中图片错误状态下的文字颜色",
+            "en": "Text color for image error state in the image picker"
+        }
+    },
+    "imagePickerFontSize": {
+        "cssKey": "image-picker-font-size",
+        "desc": "图片选择器内部字体大小",
+        "override": "",
+        "value": "~`pxtorem(14)`",
+        "jsValue": "@getRem@14",
+        "staticValue": "0.28rem",
+        "localeDesc": {
+            "ch": "图片选择器内部字体大小",
+            "en": "Font size of ImagePicker"
+        }
+    },
     "imagePlaceholderBackground": {
         "cssKey": "image-placeholder-background",
         "desc": "图片 placeholder 背景色",
@@ -5699,30 +5891,6 @@
             "en": "Label distance  of horizoverticalntal slider from the right of the mark"
         }
     },
-    "stepsCustomIconHeight": {
-        "cssKey": "steps-custom-icon-height",
-        "desc": "steps 步骤自定义图标高度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标高度",
-            "en": "Steps custom icon height"
-        }
-    },
-    "stepsCustomIconWidth": {
-        "cssKey": "steps-custom-icon-width",
-        "desc": "steps 步骤自定义图标宽度",
-        "override": "",
-        "value": "20PX",
-        "jsValue": "20PX",
-        "staticValue": "20PX",
-        "localeDesc": {
-            "ch": "steps 步骤自定义图标宽度",
-            "en": "Steps custom icon width"
-        }
-    },
     "stepsDescriptionColor": {
         "cssKey": "steps-description-color",
         "desc": "steps 步骤默认描述文字颜色",
@@ -6119,6 +6287,18 @@
             "en": "Left and right spacing of the vertical dividing line of Steps"
         }
     },
+    "stepsTailVerticalTop": {
+        "cssKey": "steps-tail-vertical-top",
+        "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "~`pxtorem(9)`",
+        "jsValue": "@getRem@9",
+        "staticValue": "0.18rem",
+        "localeDesc": {
+            "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "Left and right spacing of the vertical dividing line of Steps"
+        }
+    },
     "stepsTitleFontSize": {
         "cssKey": "steps-title-font-size",
         "desc": "steps 标题文字大小",

package/tokens/app/arcodesign/default/index.less

@@ -517,6 +517,7 @@
 @steps-padding: ~`pxtorem(16)` 0;
 @steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
 @steps-tail-vertical-padding: ~`pxtorem(14)` 0;
+@steps-tail-vertical-top: ~`pxtorem(9)`;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;
@@ -543,8 +544,6 @@
 @steps-wait-description-color: @sub-info-font-color;
 @steps-icon-width: 18PX;
 @steps-icon-height: 18PX;
-@steps-custom-icon-width: 20PX;
-@steps-custom-icon-height: 20PX;
 @steps-dot-width: 8PX;
 @steps-dot-height: 8PX;
 @steps-dot-border-width: 1.5PX;
@@ -646,4 +645,20 @@
 @action-sheet-header-padding: ~`pxtorem(16)`;
 @action-sheet-title-font-size: ~`pxtorem(16)`;
 @action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+@image-picker-font-size: ~`pxtorem(14)`;
+@image-picker-disabled-opacity: 0.7;
+@image-picker-border-radius: ~`pxtorem(2)`;
+@image-picker-add-background: #f7f8fa;
+@image-picker-add-icon-font-size: ~`pxtorem(30)`;
+@image-picker-add-icon-color: #d8d8d8;
+@image-picker-add-text-font-size: ~`pxtorem(12)`;
+@image-picker-add-text-color: @sub-info-font-color;
+@image-picker-error-color: #ffffff;
+@image-picker-error-background: rgba(0, 0, 0, 0.5);
+@image-picker-close-color: #ffffff;
+@image-picker-close-font-size: ~`pxtorem(12)`;
+@image-picker-close-width: ~`pxtorem(18)`;
+@image-picker-close-height: ~`pxtorem(18)`;
+@image-picker-close-background: rgba(0, 0, 0, 0.3);
+@image-picker-close-border-radius: 0 ~`pxtorem(2)`;
 

package/umd/_helpers/type.d.ts

@@ -25,6 +25,6 @@ export interface BaseRef {
     /**
      * 组件外层dom元素
      * @en The outer DOM element of the component
-     * */
+     */
     dom: HTMLDivElement | null;
 }

package/umd/button/demo/style/mobile.less

@@ -17,3 +17,7 @@
         }
     }
 }
+
+#demo-order-6 {
+
+}

package/umd/button/index.d.ts

@@ -109,6 +109,18 @@ export interface ButtonProps {
      * @en Callback function when disabling button
      */
     onClickDisabled?: (e: React.MouseEvent) => void;
+    /**
+     * 加载中是否禁用按钮操作
+     * @en Disable button when loading
+     * @default true
+     */
+    disableWhenLoading?: boolean;
+    /**
+     * 加载中是否覆盖Icon
+     * @en Whether to override Icon during loading
+     * @default false
+     */
+    coverIconWhenLoading?: boolean;
 }
 export interface ButtonRef {
     /**

package/umd/button/index.js

@@ -49,6 +49,8 @@
         loading = _props$loading === void 0 ? false : _props$loading,
         _props$disabled = props.disabled,
         disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$disableWhenLoa = props.disableWhenLoading,
+        disableWhenLoading = _props$disableWhenLoa === void 0 ? true : _props$disableWhenLoa,
         _props$shape = props.shape,
         shape = _props$shape === void 0 ? 'semi' : _props$shape,
         _props$halfBorder = props.halfBorder,
@@ -69,7 +71,9 @@
         children = _props$children === void 0 ? null : _props$children,
         loadingIcon = props.loadingIcon,
         onClick = props.onClick,
-        onClickDisabled = props.onClickDisabled;
+        onClickDisabled = props.onClickDisabled,
+        _props$coverIconWhenL = props.coverIconWhenLoading,
+        coverIconWhenLoading = _props$coverIconWhenL === void 0 ? false : _props$coverIconWhenL;
     var domRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, function () {
       return {
@@ -97,6 +101,14 @@
       setActive(false);
     };
 
+    var renderIcon = function renderIcon() {
+      if (coverIconWhenLoading) {
+        return loading ? null : icon;
+      }
+
+      return icon;
+    };
+
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/_react.default.createElement("button", {
@@ -115,10 +127,10 @@
         onTouchCancel: handleTouchEnd,
         onMouseDown: handleTouchStart,
         onMouseUp: handleTouchEnd,
-        onClick: disabled ? onClickDisabled : onClick
+        onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "btn-icon"
-      }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {
+      }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/_react.default.createElement(_loading.default, {
         className: "loading-icon",
         radius: 6,
         type: "circle"

package/umd/circle-progress/index.js

@@ -94,11 +94,13 @@
       if (isRenderNormal) {
         if (progressColorStart) {
           return progressColorStart;
-        } else if (progressColorEnd) {
+        }
+
+        if (progressColorEnd) {
           return progressColorEnd;
-        } else {
-          return progressColor;
         }
+
+        return progressColor;
       }
     }, [progressColorStart, progressColorEnd, progressColor]);
 

package/umd/collapse/collapse.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../context-provider", "@arco-design/mobile-utils", "../_helpers", "../icon/IconArrowDown", "./utils"], factory);
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../_helpers", "../icon/IconArrowDown", "./utils"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../context-provider"), require("@arco-design/mobile-utils"), require("../_helpers"), require("../icon/IconArrowDown"), require("./utils"));
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../_helpers"), require("../icon/IconArrowDown"), require("./utils"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.contextProvider, global.mobileUtils, global._helpers, global.IconArrowDown, global.utils);
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global._helpers, global.IconArrowDown, global.utils);
     global.collapse = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _contextProvider, _mobileUtils, _helpers, _IconArrowDown, _utils) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _helpers, _IconArrowDown, _utils) {
   "use strict";
 
   var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/umd/count-down/demo/style/mobile.less

@@ -32,7 +32,7 @@
     .btn-wrap {
         display: flex;
 
-        .arco-button.type-primary {
+        .@{prefix}-button.type-primary {
             display: flex;
             flex-direction: row;
             align-items: center;

package/umd/grid/index.js

@@ -57,14 +57,21 @@
     });
 
     var getRows = function getRows(prefix, rowsData, rows, row) {
-      var fakeGrids = new Array(!isSliding && columns && rowsData.length % columns ? columns - rowsData.length % columns : 0).fill('');
-      var widthStyle = {
-        minWidth: 1 / columns * 100 + "%"
-      };
+      var placeholders = !isSliding && rowsData.length % columns;
+      var renderData = rowsData;
+
+      if (placeholders) {
+        var fakeGrids = new Array(columns - placeholders).fill({
+          img: null,
+          title: ''
+        });
+        renderData = rowsData.concat(fakeGrids);
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefix + "-rows",
         key: row
-      }, rowsData.map(function (item, index) {
+      }, renderData.map(function (item, index) {
         var img = item.img,
             title = item.title,
             content = item.content,
@@ -78,7 +85,7 @@
         }
 
         var marginBottom = row + 1 === rows ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.y) || 0;
-        var rowLen = rowsData.length;
+        var rowLen = renderData.length;
         var marginRight = index + 1 === rowLen ? 0 : typeof gutter === 'number' ? gutter : (gutter == null ? void 0 : gutter.x) || 0;
         return /*#__PURE__*/_react.default.createElement("div", {
           key: index,
@@ -107,12 +114,6 @@
         }) : null, (row + 1) % rows !== 0 ? /*#__PURE__*/_react.default.createElement("i", {
           className: "horizontal-border"
         }) : null);
-      }), fakeGrids.map(function (_, i) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _mobileUtils.cls)(prefix + "-rows-item fake-col"),
-          key: i,
-          style: widthStyle
-        });
       }));
     };
 

package/umd/image/index.d.ts

@@ -14,7 +14,6 @@ export interface ImageProps {
     /**
      * 指定图片状态，staticLabel=false时有效
      * @en The specified image state, valid when staticLabel=false
-     * @default "init"
      */
     status?: ImageStatus;
     /**

package/umd/image/index.js

@@ -59,8 +59,7 @@
     var loadingImageRef = (0, _react.useRef)(null);
     var style = props.style,
         className = props.className,
-        _props$status = props.status,
-        status = _props$status === void 0 ? 'init' : _props$status,
+        status = props.status,
         src = props.src,
         width = props.width,
         height = props.height,
@@ -100,6 +99,7 @@
     var isPreview = Boolean(fit.indexOf('preview') >= 0);
     var actualBoxWidth = boxWidth || windowWidth;
     var actualBoxHeight = boxHeight || windowHeight;
+    var validStatus = status === undefined ? imageStatus : status;
     var attrs = (0, _react.useMemo)(function () {
       var imageStyle = {};
 
@@ -275,7 +275,9 @@
     }
 
     return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
-      var prefixCls = _ref.prefixCls;
+      var prefixCls = _ref.prefixCls,
+          _ref$locale = _ref.locale,
+          locale = _ref$locale === void 0 ? _mobileUtils.defaultLocale : _ref$locale;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _mobileUtils.cls)(prefixCls + "-image all-border-box", {
           preview: isPreview
@@ -290,7 +292,7 @@
       }, bottomOverlap || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-placeholder"
       })) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)('image-container', imageStatus, {
+        className: (0, _mobileUtils.cls)('image-container', validStatus, {
           animate: Boolean(animateDuration),
           'static-label': staticLabel
         }),
@@ -305,7 +307,7 @@
           return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
         },
         onError: handleStaticImageError
-      })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/_react.default.createElement("div", {
+      })) : null), showLoading && validStatus === 'loading' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-loading-container",
         style: {
           borderRadius: radius
@@ -317,7 +319,7 @@
         className: "loading-icon",
         radius: 8.5,
         stroke: 3
-      }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/_react.default.createElement("div", {
+      }))) : null, showError && validStatus === 'error' ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-error-container",
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -328,7 +330,7 @@
         }
       }, errorArea || /*#__PURE__*/_react.default.createElement("div", {
         className: "image-retry-load"
-      }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
+      }, locale.Image.loadError)) : null, topOverlap ? /*#__PURE__*/_react.default.createElement("div", {
         className: "image-content image-top-overlap",
         style: {
           borderRadius: radius

package/umd/image-picker/add-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function AddIcon(): JSX.Element;

package/umd/image-picker/add-icon.js

@@ -0,0 +1,35 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.addIcon = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = AddIcon;
+  _react = _interopRequireDefault(_react);
+
+  function AddIcon() {
+    return /*#__PURE__*/_react.default.createElement("svg", {
+      width: "30",
+      height: "30",
+      viewBox: "0 0 30 30",
+      fill: "none"
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
+      fill: "#C9CDD4"
+    }));
+  }
+});

package/umd/image-picker/demo/style/css/mobile.css

@@ -0,0 +1,40 @@
+#demo-image-picker .demo-space {
+  font-size: 14px;
+  line-height: 1;
+  margin: 8px 0;
+}
+#demo-image-picker #demo-order-5 .custom-delete {
+  top: 4px;
+  right: 4px;
+  font-size: 18px;
+  position: absolute;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  line-height: 16px;
+  text-align: center;
+}
+#demo-image-picker #demo-order-5 .custom-delete-bg {
+  background-color: #0000004d;
+}
+#demo-image-picker #demo-order-6 .loading,
+#demo-image-picker #demo-order-6 .loading1,
+#demo-image-picker #demo-order-6 .load-error,
+#demo-image-picker #demo-order-6 .load-error1 {
+  background: rgba(0, 0, 0, 0.5);
+  text-align: center;
+  line-height: 1.5;
+  font-size: 14px;
+  color: #fff;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}

package/umd/image-picker/demo/style/mobile.less

@@ -0,0 +1,42 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-picker {
+    .demo-space{
+        font-size: 14px;
+        line-height: 1;
+        margin: 8px 0;
+    }
+    #demo-order-5 {
+        .custom-delete {
+            top: 4px;
+            right: 4px;
+            font-size: 18px;
+            position: absolute;
+            border-radius: 50%;
+            width: 18px;
+            height: 18px;
+            line-height: 16px;
+            text-align: center;
+        }
+        .custom-delete-bg {
+            background-color: #0000004d;
+        }
+    }
+    #demo-order-6 {
+        .loading,
+        .loading1,
+        .load-error,
+        .load-error1 {
+            background: rgba(0, 0, 0, 0.5);
+            text-align: center;
+            line-height: 1.5;
+            font-size: 14px;
+            color: #fff;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+}