@nutui/nutui-react-taro 3.0.19-cpp.8 → 3.0.19

package/dist/cjs/packages/datepicker/utils.js

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get calculateDateBoundary () {
+    calculateDateBoundary: function() {
         return calculateDateBoundary;
     },
-    get formatPickerOption () {
+    formatPickerOption: function() {
         return formatPickerOption;
     },
-    get formatValue () {
+    formatValue: function() {
         return formatValue;
     },
-    get generateDatePickerRanges () {
+    generateDatePickerRanges: function() {
         return generateDatePickerRanges;
     },
-    get generatePickerColumnWithCallback () {
+    generatePickerColumnWithCallback: function() {
         return generatePickerColumnWithCallback;
     },
-    get getDatePartValue () {
+    getDatePartValue: function() {
         return getDatePartValue;
     },
-    get getLastDayOfMonth () {
+    getLastDayOfMonth: function() {
         return getLastDayOfMonth;
     },
-    get handlePickerValueChange () {
+    handlePickerValueChange: function() {
         return handlePickerValueChange;
     }
 });

package/dist/cjs/packages/dialog/content.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get Content () {
+    Content: function() {
         return Content;
     },
-    get defaultContentProps () {
+    defaultContentProps: function() {
         return defaultContentProps;
     }
 });

package/dist/cjs/packages/dialog/dialog.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: Object.getOwnPropertyDescriptor(all, name).get
+        get: all[name]
     });
 }
 _export(exports, {
-    get BaseDialog () {
+    BaseDialog: function() {
         return BaseDialog;
     },
-    get close () {
+    close: function() {
         return close;
     },
-    get open () {
+    open: function() {
         return open;
     }
 });
@@ -31,6 +31,7 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _iconsreacttaro = require("@nutui/icons-react-taro");
+var _reacttransitiongroup = require("react-transition-group");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../button/index"));
 var _content = require("./content");
 var _configprovider = require("../configprovider/configprovider");
@@ -45,6 +46,8 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     content: '',
     header: '',
     footer: '',
+    cancelBadge: '',
+    confirmBadge: '',
     confirmText: '',
     cancelText: '',
     hideConfirmButton: false,
@@ -71,7 +74,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overla
     }
 });
 var BaseDialog = function BaseDialog(props) {
-    var _useParams = (0, _usecustomevent.useParams)((0, _mergeprops.mergeProps)(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, children = _useParams_params.children, className = _useParams_params.className, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, content = _useParams_params.content, disableConfirmButton = _useParams_params.disableConfirmButton, footer = _useParams_params.footer, footerDirection = _useParams_params.footerDirection, header = _useParams_params.header, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, overlay = _useParams_params.overlay, overlayStyle = _useParams_params.overlayStyle, overlayClassName = _useParams_params.overlayClassName, style = _useParams_params.style, title = _useParams_params.title, visible = _useParams_params.visible, zIndex = _useParams_params.zIndex, beforeCancel = _useParams_params.beforeCancel, beforeClose = _useParams_params.beforeClose, onClose = _useParams_params.onClose, onCancel = _useParams_params.onCancel, onConfirm = _useParams_params.onConfirm, onOverlayClick = _useParams_params.onOverlayClick, setParams = _useParams.setParams;
+    var _useParams = (0, _usecustomevent.useParams)((0, _mergeprops.mergeProps)(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, confirmText = _useParams_params.confirmText, cancelText = _useParams_params.cancelText, children = _useParams_params.children, className = _useParams_params.className, closeIconPosition = _useParams_params.closeIconPosition, closeIcon = _useParams_params.closeIcon, content = _useParams_params.content, disableConfirmButton = _useParams_params.disableConfirmButton, footer = _useParams_params.footer, footerDirection = _useParams_params.footerDirection, header = _useParams_params.header, cancelBadge = _useParams_params.cancelBadge, confirmBadge = _useParams_params.confirmBadge, hideConfirmButton = _useParams_params.hideConfirmButton, hideCancelButton = _useParams_params.hideCancelButton, lockScroll = _useParams_params.lockScroll, overlay = _useParams_params.overlay, overlayStyle = _useParams_params.overlayStyle, overlayClassName = _useParams_params.overlayClassName, style = _useParams_params.style, title = _useParams_params.title, visible = _useParams_params.visible, zIndex = _useParams_params.zIndex, beforeCancel = _useParams_params.beforeCancel, beforeClose = _useParams_params.beforeClose, onClose = _useParams_params.onClose, onCancel = _useParams_params.onCancel, onConfirm = _useParams_params.onConfirm, onOverlayClick = _useParams_params.onOverlayClick, setParams = _useParams.setParams;
     var classPrefix = 'nut-dialog';
     var locale = (0, _configprovider.useConfig)().locale;
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), loading = _useState[0], setLoading = _useState[1];
@@ -89,8 +92,8 @@ var BaseDialog = function BaseDialog(props) {
             if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
             onCancel();
         };
-        var handleOk = function handleOk(e) {
-            return (0, _async_to_generator._)(function() {
+        var handleOk = /*#__PURE__*/ function() {
+            var _ref = (0, _async_to_generator._)(function(e) {
                 var e1;
                 return (0, _ts_generator._)(this, function(_state) {
                     switch(_state.label){
@@ -130,8 +133,11 @@ var BaseDialog = function BaseDialog(props) {
                             ];
                     }
                 });
-            })();
-        };
+            });
+            return function handleOk(e) {
+                return _ref.apply(this, arguments);
+            };
+        }();
         var btnClass = hideCancelButton || hideConfirmButton ? "".concat(classPrefix, "-footer-block") : '';
         var renderCancelOfVertical = function renderCancelOfVertical() {
             return !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_components.View, {
@@ -142,17 +148,43 @@ var BaseDialog = function BaseDialog(props) {
             }, cancelText || locale.cancel);
         };
         var renderCancel = function renderCancel() {
-            return !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_index.default, {
+            return !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, cancelBadge ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+                className: "".concat(classPrefix, "-footer-cancel-container")
+            }, /*#__PURE__*/ _react.default.createElement(_index.default, {
                 type: "default",
                 size: "large",
                 className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
                 onClick: function onClick(e) {
                     return handleCancel(e);
                 }
-            }, cancelText || locale.cancel);
+            }, cancelText || locale.cancel), cancelBadge ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+                className: "".concat(classPrefix, "-footer-cancel-badge")
+            }, cancelBadge) : null) : /*#__PURE__*/ _react.default.createElement(_index.default, {
+                type: "default",
+                size: "large",
+                className: "".concat(classPrefix, "-footer-cancel ").concat(btnClass),
+                onClick: function onClick(e) {
+                    return handleCancel(e);
+                }
+            }, cancelText || locale.cancel));
         };
         var renderConfirm = function renderConfirm() {
-            return !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_index.default, {
+            return !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, confirmBadge ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+                className: "".concat(classPrefix, "-footer-ok-container")
+            }, /*#__PURE__*/ _react.default.createElement(_index.default, {
+                type: "primary",
+                size: "large",
+                className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
+                    disabled: disableConfirmButton
+                }),
+                disabled: disableConfirmButton,
+                onClick: function onClick(e) {
+                    return handleOk(e);
+                },
+                loading: loading
+            }, confirmText || locale.confirm), confirmBadge ? /*#__PURE__*/ _react.default.createElement(_components.View, {
+                className: "".concat(classPrefix, "-footer-ok-badge")
+            }, confirmBadge) : null) : /*#__PURE__*/ _react.default.createElement(_index.default, {
                 type: "primary",
                 size: "large",
                 className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok ").concat(btnClass), {
@@ -163,7 +195,7 @@ var BaseDialog = function BaseDialog(props) {
                     return handleOk(e);
                 },
                 loading: loading
-            }, confirmText || locale.confirm);
+            }, confirmText || locale.confirm));
         };
         return footer || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, footerDirection === 'vertical' ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderConfirm(), renderCancelOfVertical()) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderCancel(), renderConfirm()));
     };
@@ -178,7 +210,11 @@ var BaseDialog = function BaseDialog(props) {
         var systomIcon = closeIconPosition !== 'bottom' ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null) : /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Failure, null);
         return /*#__PURE__*/ _react.default.createElement(_components.View, {
             className: closeClasses,
-            onClick: handleClose
+            onClick: handleClose,
+            ariaRole: "button",
+            ariaLabel: locale.close,
+            // @ts-ignore
+            tabIndex: 0
         }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : systomIcon);
     };
     var onHandleClickOverlay = function onHandleClickOverlay(e) {
@@ -190,20 +226,17 @@ var BaseDialog = function BaseDialog(props) {
     var renderContent = function renderContent() {
         var contentZIndex = (0, _platform.harmony)() ? zIndex + 1 : zIndex // 解决harmony层级问题
         ;
-        return(// <CSSTransition
-        //   in={visible}
-        //   timeout={300}
-        //   classNames="fadeDialog"
-        //   unmountOnExit
-        //   appear
-        // >
-        /*#__PURE__*/ /*#__PURE__*/ _react.default.createElement(_content.Content, {
+        return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+            in: visible,
+            timeout: 300,
+            classNames: "fadeDialog",
+            unmountOnExit: true,
+            appear: true
+        }, /*#__PURE__*/ _react.default.createElement(_content.Content, {
             className: className,
-            style: (0, _object_spread_props._)((0, _object_spread._)({
+            style: (0, _object_spread._)({
                 zIndex: contentZIndex
-            }, style), {
-                display: visible ? 'block' : 'none'
-            }),
+            }, style),
             title: title,
             header: header,
             close: renderCloseIcon(),

package/dist/cjs/packages/dialog/style/dialog.scss

@@ -17,9 +17,11 @@
     position: fixed;
     max-height: 100%;
     background-color: $dialog-background;
+    /* #ifndef dynamic*/
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
+    /* #endif */
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;
@@ -119,6 +121,7 @@
         display: flex;
         justify-content: center;
         margin-top: $dialog-vertical-footer-ok-margin-top;
+        background: transparent;
       }
     }
 
@@ -138,6 +141,28 @@
       }
     }
 
+    &-ok-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-ok-badge {
+        position: absolute;
+        right: 0;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-ok;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-ok;
+      }
+    }
+
     &-ok {
       max-width: $dialog-footer-ok-max-width;
       font-weight: $font-weight-medium;
@@ -151,6 +176,28 @@
         min-width: 100%;
       }
     }
+
+    &-cancel-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-cancel-badge {
+        position: absolute;
+        right: $dialog-footer-cancel-margin-right;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-cancel;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-cancel;
+      }
+    }
   }
 }
 

package/dist/cjs/packages/dialog/style/style.css

@@ -19,7 +19,9 @@
   position: fixed;
   max-height: 100%;
   background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff));
+  /* #ifndef dynamic*/
   transition: transform 0.2s, -webkit-transform 0.2s;
+  /* #endif */
   -webkit-overflow-scrolling: touch;
   top: 50%;
   left: 50%;
@@ -113,6 +115,7 @@
   display: flex;
   justify-content: center;
   margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16px);
+  background: transparent;
 }
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
@@ -128,6 +131,26 @@
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children {
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
 }
+.nut-dialog-footer-ok-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge {
+  position: absolute;
+  right: 0;
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23));
+}
 .nut-dialog-footer-ok {
   max-width: var(--nutui-dialog-footer-ok-max-width, 128px);
   font-weight: var(--nutui-font-weight-medium, 500);
@@ -138,6 +161,26 @@
 .nut-dialog-footer-block.nut-button {
   min-width: 100%;
 }
+.nut-dialog-footer-cancel-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge {
+  position: absolute;
+  right: var(--nutui-dialog-footer-cancel-margin-right, 12px);
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23));
+}
 
 [dir=rtl] .nut-dialog-outer,
 .nut-rtl .nut-dialog-outer {

package/dist/cjs/packages/dialog/style/style.harmony.css

@@ -60,6 +60,9 @@
   /* #ifdef dynamic*/
   pointer-events: none;
   /* #endif */
+  /* #ifndef dynamic*/
+  pointer-events: auto;
+  /* #endif */
 }
 .nut-button::after {
   border: none;
@@ -453,7 +456,9 @@
   position: fixed;
   max-height: 100%;
   background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff));
+  /* #ifndef dynamic*/
   transition: transform 0.2s, -webkit-transform 0.2s;
+  /* #endif */
   -webkit-overflow-scrolling: touch;
   top: 50%;
   left: 50%;
@@ -547,6 +552,7 @@
   display: flex;
   justify-content: center;
   margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16px);
+  background: transparent;
 }
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
@@ -562,6 +568,26 @@
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children {
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
 }
+.nut-dialog-footer-ok-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge {
+  position: absolute;
+  right: 0;
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23));
+}
 .nut-dialog-footer-ok {
   max-width: var(--nutui-dialog-footer-ok-max-width, 128px);
   font-weight: var(--nutui-font-weight-medium, 500);
@@ -572,6 +598,26 @@
 .nut-dialog-footer-block.nut-button {
   min-width: 100%;
 }
+.nut-dialog-footer-cancel-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge {
+  position: absolute;
+  right: var(--nutui-dialog-footer-cancel-margin-right, 12px);
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23));
+}
 
 [dir=rtl] .nut-dialog-outer,
 .nut-rtl .nut-dialog-outer {

package/dist/cjs/packages/dialog/style-jmapp/dialog.scss

@@ -17,9 +17,11 @@
     position: fixed;
     max-height: 100%;
     background-color: $dialog-background;
+    /* #ifndef dynamic*/
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
+    /* #endif */
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;
@@ -119,6 +121,7 @@
         display: flex;
         justify-content: center;
         margin-top: $dialog-vertical-footer-ok-margin-top;
+        background: transparent;
       }
     }
 
@@ -138,6 +141,28 @@
       }
     }
 
+    &-ok-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-ok-badge {
+        position: absolute;
+        right: 0;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-ok;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-ok;
+      }
+    }
+
     &-ok {
       max-width: $dialog-footer-ok-max-width;
       font-weight: $font-weight-medium;
@@ -151,6 +176,28 @@
         min-width: 100%;
       }
     }
+
+    &-cancel-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-cancel-badge {
+        position: absolute;
+        right: $dialog-footer-cancel-margin-right;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-cancel;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-cancel;
+      }
+    }
   }
 }
 

package/dist/cjs/packages/dialog/style-jmapp/style.css

@@ -19,7 +19,9 @@
   position: fixed;
   max-height: 100%;
   background-color: var(--nutui-dialog-background, var(--nutui-color-surface-2));
+  /* #ifndef dynamic*/
   transition: transform 0.2s, -webkit-transform 0.2s;
+  /* #endif */
   -webkit-overflow-scrolling: touch;
   top: 50%;
   left: 50%;
@@ -113,6 +115,7 @@
   display: flex;
   justify-content: center;
   margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 5px);
+  background: transparent;
 }
 .nut-dialog-footer .nut-button {
   min-width: var(--nutui-dialog-footer-button-min-width, 117px);
@@ -128,6 +131,26 @@
 .nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children {
   color: var(--nutui-button-default-color, var(--nutui-color-text));
 }
+.nut-dialog-footer-ok-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge {
+  position: absolute;
+  right: 0;
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary));
+}
 .nut-dialog-footer-ok {
   max-width: var(--nutui-dialog-footer-ok-max-width, 128px);
   font-weight: var(--nutui-font-weight-medium, 500);
@@ -138,6 +161,26 @@
 .nut-dialog-footer-block.nut-button {
   min-width: 100%;
 }
+.nut-dialog-footer-cancel-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-around;
+}
+.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge {
+  position: absolute;
+  right: var(--nutui-dialog-footer-cancel-margin-right, 12px);
+  top: var(--nutui-dialog-footer-badge-top, -8px);
+  display: flex;
+  align-items: center;
+  height: var(--nutui-dialog-footer-badge-height, 14px);
+  padding: var(--nutui-dialog-footer-badge-padding, 0 3px);
+  background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light));
+  border-radius: var(--nutui-dialog-footer-badge-border-radius, 2px 2px 0px 2px);
+  font-size: var(--nutui-dialog-footer-badge-fontsize, 10px);
+  color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary));
+}
 
 [dir=rtl] .nut-dialog-outer,
 .nut-rtl .nut-dialog-outer {

package/dist/cjs/packages/dialog/style-jrkf/dialog.scss

@@ -17,9 +17,11 @@
     position: fixed;
     max-height: 100%;
     background-color: $dialog-background;
+    /* #ifndef dynamic*/
     transition:
       transform 0.2s,
       -webkit-transform 0.2s;
+    /* #endif */
     -webkit-overflow-scrolling: touch;
     top: 50%;
     left: 50%;
@@ -119,6 +121,7 @@
         display: flex;
         justify-content: center;
         margin-top: $dialog-vertical-footer-ok-margin-top;
+        background: transparent;
       }
     }
 
@@ -138,6 +141,28 @@
       }
     }
 
+    &-ok-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-ok-badge {
+        position: absolute;
+        right: 0;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-ok;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-ok;
+      }
+    }
+
     &-ok {
       max-width: $dialog-footer-ok-max-width;
       font-weight: $font-weight-medium;
@@ -151,6 +176,28 @@
         min-width: 100%;
       }
     }
+
+    &-cancel-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-around;
+
+      .nut-dialog-footer-cancel-badge {
+        position: absolute;
+        right: $dialog-footer-cancel-margin-right;
+        top: $dialog-footer-badge-top;
+        display: flex;
+        align-items: center;
+        height: $dialog-footer-badge-height;
+        padding: $dialog-footer-badge-padding;
+        background: $dialog-footer-badge-bg-cancel;
+        border-radius: $dialog-footer-badge-border-radius;
+        font-size: $dialog-footer-badge-fontsize;
+        color: $dialog-footer-badge-color-cancel;
+      }
+    }
   }
 }