From 1865e06a7abba199914a89d93d772fd66166b63d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 20 Mar 2021 15:47:52 +0800
Subject: [PATCH] feat(Dialog): add footer slot (#8382)

---
 src/dialog/Dialog.tsx                            | 11 ++++++++++-
 src/dialog/README.md                             |  9 +++++----
 src/dialog/README.zh-CN.md                       |  9 +++++----
 src/dialog/test/__snapshots__/index.spec.js.snap | 14 ++++++++++++++
 src/dialog/test/index.spec.js                    | 13 +++++++++++++
 5 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/dialog/Dialog.tsx b/src/dialog/Dialog.tsx
index 72e1b5fc0..7c29fad3b 100644
--- a/src/dialog/Dialog.tsx
+++ b/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>
       );
     };
diff --git a/src/dialog/README.md b/src/dialog/README.md
index 6c1038bba..504028b24 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -204,10 +204,11 @@ export default {
 
 ### Slots
 
-| Name    | Description    |
-| ------- | -------------- |
-| default | Custom message |
-| title   | Custom title   |
+| Name             | Description    |
+| ---------------- | -------------- |
+| default          | Custom message |
+| title            | Custom title   |
+| footer `v3.0.10` | Custom footer  |
 
 ### Less Variables
 
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index 1b9de2057..bedad1ed9 100644
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@@ -243,10 +243,11 @@ export default {
 
 通过组件调用 `Dialog` 时，支持以下插槽：
 
-| 名称    | 说明       |
-| ------- | ---------- |
-| default | 自定义内容 |
-| title   | 自定义标题 |
+| 名称             | 说明               |
+| ---------------- | ------------------ |
+| default          | 自定义内容         |
+| title            | 自定义标题         |
+| footer `v3.0.10` | 自定义底部按钮区域 |
 
 ### 样式变量
 
diff --git a/src/dialog/test/__snapshots__/index.spec.js.snap b/src/dialog/test/__snapshots__/index.spec.js.snap
index b9cb25f85..8a71a99a9 100644
--- a/src/dialog/test/__snapshots__/index.spec.js.snap
+++ b/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
diff --git a/src/dialog/test/index.spec.js b/src/dialog/test/index.spec.js
index c80e696b3..6007464ec 100644
--- a/src/dialog/test/index.spec.js
+++ b/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();
+});