feat(Dialog): allow to disable confirm or cancel button (#10665)

packages/vant/src/dialog/Dialog.tsx

@@ -56,8 +56,10 @@ const dialogProps = extend({}, popupSharedProps, {
   showCancelButton: Boolean,
   cancelButtonText: String,
   cancelButtonColor: String,
+  cancelButtonDisabled: Boolean,
   confirmButtonText: String,
   confirmButtonColor: String,
+  confirmButtonDisabled: Boolean,
   showConfirmButton: truthProp,
   closeOnClickOverlay: Boolean,
 });
@@ -197,6 +199,7 @@ export default defineComponent({
             class={bem('cancel')}
             style={{ color: props.cancelButtonColor }}
             loading={loading.cancel}
+            disabled={props.cancelButtonDisabled}
             onClick={onCancel}
           />
         )}
@@ -207,6 +210,7 @@ export default defineComponent({
             class={[bem('confirm'), { [BORDER_LEFT]: props.showCancelButton }]}
             style={{ color: props.confirmButtonColor }}
             loading={loading.confirm}
+            disabled={props.confirmButtonDisabled}
             onClick={onConfirm}
           />
         )}
@@ -222,6 +226,7 @@ export default defineComponent({
             class={bem('cancel')}
             color={props.cancelButtonColor}
             loading={loading.cancel}
+            disabled={props.cancelButtonDisabled}
             onClick={onCancel}
           />
         )}
@@ -232,6 +237,7 @@ export default defineComponent({
             class={bem('confirm')}
             color={props.confirmButtonColor}
             loading={loading.confirm}
+            disabled={props.confirmButtonDisabled}
             onClick={onConfirm}
           />
         )}

packages/vant/src/dialog/README.md

@@ -154,8 +154,10 @@ export default {
 | showCancelButton | Whether to show cancel button | _boolean_ | `false` |
 | cancelButtonText | Cancel button text | _string_ | `Cancel` |
 | cancelButtonColor | Cancel button color | _string_ | `black` |
+| confirmButtonDisabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` |
 | confirmButtonText | Confirm button text | _string_ | `Confirm` |
 | confirmButtonColor | Confirm button color | _string_ | `#ee0a24` |
+| confirmButtonDisabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlayClass | Custom overlay class | _string \| Array \| object_ | - |
 | overlayStyle | Custom overlay style | _object_ | - |
@@ -181,8 +183,10 @@ export default {
 | show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
 | cancel-button-text | Cancel button text | _string_ | `Cancel` |
 | cancel-button-color | Cancel button color | _string_ | `black` |
+| cancel-button-disabled `v3.5.0` | Whether to disable cancel button | _boolean_ | `false` |
 | confirm-button-text | Confirm button text | _string_ | `Confirm` |
 | confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
+| confirm-button-disabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlay-class | Custom overlay class | _string_ | - |
 | overlay-style | Custom overlay style | _object_ | - |

packages/vant/src/dialog/README.zh-CN.md

@@ -200,8 +200,10 @@ export default {
 | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
 | confirmButtonText | 确认按钮文案 | _string_ | `确认` |
 | confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` |
+| confirmButtonDisabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` |
 | cancelButtonText | 取消按钮文案 | _string_ | `取消` |
 | cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
+| cancelButtonDisabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` |
 | overlay | 是否展示遮罩层 | _boolean_ | `true` |
 | overlayClass | 自定义遮罩层类名 | _string \| Array \| object_ | - |
 | overlayStyle | 自定义遮罩层样式 | _object_ | - |
@@ -229,8 +231,10 @@ export default {
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
 | confirm-button-text | 确认按钮文案 | _string_ | `确认` |
 | confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` |
+| confirm-button-disabled `v3.5.0` | 是否禁用确认按钮 | _boolean_ | `false` |
 | cancel-button-text | 取消按钮文案 | _string_ | `取消` |
 | cancel-button-color | 取消按钮颜色 | _string_ | `black` |
+| cancel-button-disabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` |
 | overlay | 是否展示遮罩层 | _boolean_ | `true` |
 | overlay-class | 自定义遮罩层类名 | _string_ | - |
 | overlay-style | 自定义遮罩层样式 | _object_ | - |

packages/vant/src/dialog/function-call.tsx

@@ -56,8 +56,10 @@ Dialog.defaultOptions = {
   messageAlign: '',
   cancelButtonText: '',
   cancelButtonColor: null,
+  cancelButtonDisabled: false,
   confirmButtonText: '',
   confirmButtonColor: null,
+  confirmButtonDisabled: false,
   showConfirmButton: true,
   showCancelButton: false,
   closeOnPopstate: true,

packages/vant/src/dialog/test/index.spec.js

@@ -142,3 +142,30 @@ test('should render footer slot correctly', () => {
   });
   expect(wrapper.find('.van-dialog').html()).toMatchSnapshot();
 });
+
+test('should allow to disable confirm button', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      message: 'message',
+      confirmButtonDisabled: true,
+    },
+  });
+  expect(wrapper.find('.van-dialog__confirm').classes()).toContain(
+    'van-button--disabled'
+  );
+});
+
+test('should allow to disable cancel button', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      showCancelButton: true,
+      message: 'message',
+      cancelButtonDisabled: true,
+    },
+  });
+  expect(wrapper.find('.van-dialog__cancel').classes()).toContain(
+    'van-button--disabled'
+  );
+});

packages/vant/src/dialog/types.ts

@@ -23,12 +23,14 @@ export type DialogOptions = {
   overlayClass?: string;
   overlayStyle?: CSSProperties;
   closeOnPopstate?: boolean;
-  cancelButtonText?: string;
   showCancelButton?: boolean;
   showConfirmButton?: boolean;
+  cancelButtonText?: string;
   cancelButtonColor?: string;
+  cancelButtonDisabled?: boolean;
   confirmButtonText?: string;
   confirmButtonColor?: string;
+  confirmButtonDisabled?: boolean;
   closeOnClickOverlay?: boolean;
 };