From 984e0c257825f3055571b4fbefe7259cd1c6911b Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Mon, 17 Jan 2022 14:58:06 +0800
Subject: [PATCH] feat(components): [el-drawer] add footer slot (#5404)

* feat: [el-drawer]add footer slot

* feat(components): [el-drawer]add footer slot

* feat(components): [el-drawer]add cancel and confirm function
---
 docs/en-US/component/drawer.md            | 11 ++++---
 docs/examples/drawer/basic-usage.vue      | 38 +++++++++++++++++++++++
 packages/components/drawer/src/drawer.vue |  3 ++
 packages/theme-chalk/src/drawer.scss      |  6 ++++
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/docs/en-US/component/drawer.md b/docs/en-US/component/drawer.md
index e1ffc7a209..8209f9f0e3 100644
--- a/docs/en-US/component/drawer.md
+++ b/docs/en-US/component/drawer.md
@@ -42,7 +42,7 @@ Since v-model is natively supported for all components, `visible.sync` has been
 
 Callout a temporary drawer, from multiple direction
 
-:::demo You must set `model-value` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has to parts: `title` & `body`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
+:::demo You must set `model-value` for `Drawer` like `Dialog` does to control the visibility of `Drawer` itself, it's `boolean` type. `Drawer` has three parts: `title` & `body` & `footer`, the `title` is a named slot, you can also set the title through attribute named `title`, default to an empty string, the `body` part is the main area of `Drawer`, which contains user defined content. When opening, `Drawer` expand itself from the **right corner to left** which size is **30%** of the browser window by default. You can change that default behavior by setting `direction` and `size` attribute. This show case also demonstrated how to use the `before-close` API, check the Attribute section for more detail
 
 drawer/basic-usage
 
@@ -115,10 +115,11 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 
 ## Drawer Slots
 
-| Name  | Description          |
-| ----- | -------------------- |
-| —     | Drawer's Content     |
-| title | Drawer Title Section |
+| Name   | Description           |
+| ------ | --------------------- |
+| —      | Drawer's Content      |
+| title  | Drawer Title Section  |
+| footer | Drawer footer Section |
 
 ## Drawer Methods
 
diff --git a/docs/examples/drawer/basic-usage.vue b/docs/examples/drawer/basic-usage.vue
index dab9526cb8..3db8af23e4 100644
--- a/docs/examples/drawer/basic-usage.vue
+++ b/docs/examples/drawer/basic-usage.vue
@@ -9,6 +9,9 @@
   <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
     open
   </el-button>
+  <el-button type="primary" style="margin-left: 16px" @click="drawer2 = true">
+    with footer
+  </el-button>
 
   <el-drawer
     v-model="drawer"
@@ -18,6 +21,27 @@
   >
     <span>Hi, there!</span>
   </el-drawer>
+  <el-drawer v-model="drawer2" :direction="direction">
+    <template #title>
+      <h4>set title by slot</h4>
+    </template>
+    <template #default>
+      <div>
+        <el-radio v-model="radio1" label="Option 1" size="large"
+          >Option 1</el-radio
+        >
+        <el-radio v-model="radio1" label="Option 2" size="large"
+          >Option 2</el-radio
+        >
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <el-button @click="cancelClick">cancel</el-button>
+        <el-button type="primary" @click="confirmClick">confirm</el-button>
+      </div>
+    </template>
+  </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -25,7 +49,9 @@ import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
 
 const drawer = ref(false)
+const drawer2 = ref(false)
 const direction = ref('rtl')
+const radio1 = ref('Option 1')
 const handleClose = (done: () => void) => {
   ElMessageBox.confirm('Are you sure you want to close this?')
     .then(() => {
@@ -35,4 +61,16 @@ const handleClose = (done: () => void) => {
       // catch error
     })
 }
+function cancelClick() {
+  drawer2.value = false
+}
+function confirmClick() {
+  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
+    .then(() => {
+      drawer2.value = false
+    })
+    .catch(() => {
+      // catch error
+    })
+}
 </script>
diff --git a/packages/components/drawer/src/drawer.vue b/packages/components/drawer/src/drawer.vue
index d41aaf9eb8..b4f79bad94 100644
--- a/packages/components/drawer/src/drawer.vue
+++ b/packages/components/drawer/src/drawer.vue
@@ -51,6 +51,9 @@
               <slot></slot>
             </section>
           </template>
+          <div v-if="$slots.footer" class="el-drawer__footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
       </el-overlay>
     </transition>
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 3b9fdfc9a6..f545a3debc 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -45,6 +45,12 @@ $directions: rtl, ltr, ttb, btt;
     font-size: 1rem;
   }
 
+  @include e(footer) {
+    padding: var(--el-drawer-padding-primary);
+    padding-top: 10px;
+    text-align: right;
+  }
+
   &__close-btn {
     border: none;
     cursor: pointer;