feat(Dialog): add footer slot (#8382)

src/dialog/Dialog.tsx

@@ -199,6 +199,15 @@ export default defineComponent({
       </ActionBar>
     );
 
+    const renderFooter = () => {
+      if (slots.footer) {
+        return slots.footer();
+      }
+      return props.theme === 'round-button'
+        ? renderRoundButtons()
+        : renderButtons();
+    };
+
     return () => {
       const { width, title, theme, message, className } = props;
       return (
@@ -214,7 +223,7 @@ export default defineComponent({
         >
           {renderTitle()}
           {renderContent()}
-          {theme === 'round-button' ? renderRoundButtons() : renderButtons()}
+          {renderFooter()}
         </Popup>
       );
     };

src/dialog/README.md

@@ -204,10 +204,11 @@ export default {
 
 ### Slots
 
-| Name    | Description    |
+| Name             | Description    |
-| ------- | -------------- |
+| ---------------- | -------------- |
-| default | Custom message |
+| default          | Custom message |
-| title   | Custom title   |
+| title            | Custom title   |
+| footer `v3.0.10` | Custom footer  |
 
 ### Less Variables
 

src/dialog/README.zh-CN.md

@@ -243,10 +243,11 @@ export default {
 
 通过组件调用 `Dialog` 时，支持以下插槽：
 
-| 名称    | 说明       |
+| 名称             | 说明               |
-| ------- | ---------- |
+| ---------------- | ------------------ |
-| default | 自定义内容 |
+| default          | 自定义内容         |
-| title   | 自定义标题 |
+| title            | 自定义标题         |
+| footer `v3.0.10` | 自定义底部按钮区域 |
 
 ### 样式变量
 

src/dialog/test/__snapshots__/index.spec.js.snap

@@ -29,6 +29,20 @@ exports[`should render default slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render footer slot correctly 1`] = `
+<div class="van-popup van-popup--center van-dialog"
+     role="dialog"
+     aria-labelledby="message"
+>
+  <div class="van-dialog__content van-dialog__content--isolated">
+    <div class="van-dialog__message">
+      message
+    </div>
+  </div>
+  Custom Footer
+</div>
+`;
+
 exports[`should render title slot correctly 1`] = `
 <div class="van-dialog__header van-dialog__header--isolated">
   Custom Title

src/dialog/test/index.spec.js

@@ -129,3 +129,16 @@ test('should update width when using width prop', async () => {
   const dialog = wrapper.find('.van-dialog').element;
   expect(dialog.style.width).toEqual('200px');
 });
+
+test('should render footer slot correctly', () => {
+  const wrapper = mount(Dialog, {
+    props: {
+      show: true,
+      message: 'message',
+    },
+    slots: {
+      footer: () => 'Custom Footer',
+    },
+  });
+  expect(wrapper.find('.van-dialog').html()).toMatchSnapshot();
+});