feat(dialog): add confirm/cancel button slot support (#5502)

packages/dialog/README.md

@@ -102,21 +102,22 @@ Dialog.alert({
 ```javascript
 import Dialog from '@vant/weapp/dialog/dialog';
 
-const beforeClose = (action) => new Promise((resolve) => {
+const beforeClose = (action) =>
-  setTimeout(() => {
+  new Promise((resolve) => {
-    if (action === 'confirm') {
+    setTimeout(() => {
-      resolve(true);
+      if (action === 'confirm') {
-    } else {
+        resolve(true);
-      // 拦截取消操作
+      } else {
-      resolve(false);
+        // 拦截取消操作
-    }
+        resolve(false);
-  }, 1000);
+      }
-});
+    }, 1000);
+  });
 
 Dialog.confirm({
   title: '标题',
   message: '弹窗内容',
-  beforeClose
+  beforeClose,
 });
 ```
 
@@ -258,6 +259,8 @@ Page({
 | close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` |
 | use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` |
 | use-title-slot | 是否使用自定义标题的插槽 | _boolean_ | `false` |
+| use-confirm-button-slot `1.10.23` | 是否使用自定义确认按钮的插槽 | _boolean_ | `false` |
+| use-cancel-button-slot `1.10.23` | 是否使用自定义取消按钮的插槽 | _boolean_ | `false` |
 | async-close | 已废弃，将在 2.0.0 移除，请使用 `beforeClose` 属性代替 | _boolean_ | `false` |
 | before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise\<boolean\>_ | - |
 | transition | 动画名称，可选值为`fade` | _string_ | `scale` |
@@ -294,15 +297,16 @@ Page({
 
 ### Slot
 
-| 名称  | 说明                                                 |
+| 名称 | 说明 |
-| ----- | ---------------------------------------------------- |
+| --- | --- |
 | title | 自定义`title`显示内容，如果设置了`title`属性则不生效 |
+| confirm-button `1.10.23` | 自定义`confirm-button`显示内容，需要 `use-confirm-button-slot` 为 `true` |
+| cancel-button `1.10.23` | 自定义`cancel-button`显示内容，需要 `use-cancel-button-slot` 为 `true` |
 
 ### 外部样式类
 
-| 类名                   | 说明         |
+| 类名                            | 说明           |
-| ---------------------- | ------------ |
+| ------------------------------- | -------------- |
-| custom-class `v1.10.8` | 根节点样式类 |
+| custom-class `v1.10.8`          | 根节点样式类   |
-| cancle-button-class `v1.10.21` | 取消按钮样式类 |
+| cancle-button-class `v1.10.21`  | 取消按钮样式类 |
 | confirm-button-class `v1.10.21` | 确认按钮样式类 |
-

packages/dialog/index.ts

@@ -21,14 +21,16 @@ VantComponent({
       type: String,
       value: 'default',
     },
-    useSlot: Boolean,
     className: String,
     customStyle: String,
     asyncClose: Boolean,
     messageAlign: String,
     beforeClose: null,
     overlayStyle: String,
+    useSlot: Boolean,
     useTitleSlot: Boolean,
+    useConfirmButtonSlot: Boolean,
+    useCancelButtonSlot: Boolean,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,

packages/dialog/index.wxml

@@ -70,44 +70,53 @@
   </van-goods-action>
 
   <view wx:elif="{{ showCancelButton || showConfirmButton }}" class="van-hairline--top van-dialog__footer">
-    <van-button
+    <block wx:if="{{ showCancelButton }}">
-      wx:if="{{ showCancelButton }}"
+      <slot wx:if="{{ useCancelButtonSlot }}" name="cancel-button" />
-      size="large"
-      loading="{{ loading.cancel }}"
-      class="van-dialog__button van-hairline--right"
-      custom-class="van-dialog__cancel cancle-button-class"
-      custom-style="color: {{ cancelButtonColor }}"
-      bind:click="onCancel"
-    >
-      {{ cancelButtonText }}
-    </van-button>
-    <van-button
-      wx:if="{{ showConfirmButton }}"
-      size="large"
-      class="van-dialog__button"
-      loading="{{ loading.confirm }}"
-      custom-class="van-dialog__confirm confirm-button-class"
-      custom-style="color: {{ confirmButtonColor }}"
 
-      open-type="{{ confirmButtonOpenType }}"
+      <van-button
-      lang="{{ lang }}"
+        wx:else
-      business-id="{{ businessId }}"
+        size="large"
-      session-from="{{ sessionFrom }}"
+        loading="{{ loading.cancel }}"
-      send-message-title="{{ sendMessageTitle }}"
+        class="van-dialog__button van-hairline--right"
-      send-message-path="{{ sendMessagePath }}"
+        custom-class="van-dialog__cancel cancle-button-class"
-      send-message-img="{{ sendMessageImg }}"
+        custom-style="color: {{ cancelButtonColor }}"
-      show-message-card="{{ showMessageCard }}"
+        bind:click="onCancel"
-      app-parameter="{{ appParameter }}"
+      >
+        {{ cancelButtonText }}
+      </van-button>
+    </block>
 
-      bind:click="onConfirm"
+    <block wx:if="{{ showConfirmButton }}">
-      bindgetuserinfo="onGetUserInfo"
+      <slot wx:if="{{ useConfirmButtonSlot }}" name="confirm-button" />
-      bindcontact="onContact"
+
-      bindgetphonenumber="onGetPhoneNumber"
+      <van-button
-      binderror="onError"
+        wx:else
-      bindlaunchapp="onLaunchApp"
+        size="large"
-      bindopensetting="onOpenSetting"
+        class="van-dialog__button"
-    >
+        loading="{{ loading.confirm }}"
-      {{ confirmButtonText }}
+        custom-class="van-dialog__confirm confirm-button-class"
-    </van-button>
+        custom-style="color: {{ confirmButtonColor }}"
+
+        open-type="{{ confirmButtonOpenType }}"
+        lang="{{ lang }}"
+        business-id="{{ businessId }}"
+        session-from="{{ sessionFrom }}"
+        send-message-title="{{ sendMessageTitle }}"
+        send-message-path="{{ sendMessagePath }}"
+        send-message-img="{{ sendMessageImg }}"
+        show-message-card="{{ showMessageCard }}"
+        app-parameter="{{ appParameter }}"
+
+        bind:click="onConfirm"
+        bindgetuserinfo="onGetUserInfo"
+        bindcontact="onContact"
+        bindgetphonenumber="onGetPhoneNumber"
+        binderror="onError"
+        bindlaunchapp="onLaunchApp"
+        bindopensetting="onOpenSetting"
+      >
+        {{ confirmButtonText }}
+      </van-button>
+    </block>
   </view>
 </van-popup>