From 61ea63199a19ddf5b933429cb7a24fd0fa0b2b11 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 4 Nov 2021 20:43:09 +0800
Subject: [PATCH] feat(Cascader): add options-bottom slot (#9804)

---
 packages/vant/src/cascader/Cascader.tsx       |  5 ++--
 packages/vant/src/cascader/README.md          |  3 ++-
 packages/vant/src/cascader/README.zh-CN.md    |  1 +
 .../test/__snapshots__/index.spec.ts.snap     | 27 ++++++++++---------
 packages/vant/src/cascader/test/index.spec.ts |  5 ++--
 5 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index 7e61d423b..deda430eb 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -259,10 +259,9 @@ export default defineComponent({
             unselected: !selected,
           })}
         >
-          {slots['options-top']
-            ? slots['options-top']({ tabIndex: activeTab.value })
-            : null}
+          {slots['options-top']?.({ tabIndex })}
           {renderOptions(options, selected, tabIndex)}
+          {slots['options-bottom']?.({ tabIndex })}
         </Tab>
       );
     };
diff --git a/packages/vant/src/cascader/README.md b/packages/vant/src/cascader/README.md
index 6f1c66cd0..cde09899b 100644
--- a/packages/vant/src/cascader/README.md
+++ b/packages/vant/src/cascader/README.md
@@ -282,7 +282,8 @@ export default {
 | --- | --- | --- |
 | title | Custom title | - |
 | option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
-| options-top `v3.2.7` | Custom the content above options | _{ tabIndex: number }_ |
+| options-top `v3.2.7` | Custom the content above the options | _{ tabIndex: number }_ |
+| options-bottom `v3.2.8` | Custom the content below the options | _{ tabIndex: number }_ |
 
 ### Types
 
diff --git a/packages/vant/src/cascader/README.zh-CN.md b/packages/vant/src/cascader/README.zh-CN.md
index e1353bf5e..78fac0a94 100644
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/packages/vant/src/cascader/README.zh-CN.md
@@ -295,6 +295,7 @@ export default {
 | title | 自定义顶部标题 | - |
 | option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
 | options-top `v3.2.7` | 自定义选项上方的内容 | _{ tabIndex: number }_ |
+| options-bottom `v3.2.8` | 自定义选项下方的内容 | _{ tabIndex: number }_ |
 
 ### 类型定义
 
diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index c1459b0ac..aa247e4b3 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -1,8 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` should allow more custom content 1`] = `
+exports[`should change close icon when using close-icon prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
+</i>
+`;
+
+exports[`should render option slot correctly 1`] = `
+<li class="van-cascader__option">
+  Custom Option foo
+</li>
+`;
+
+exports[`should render options-top、options-bottom slots correctly 1`] = `
 <div class="van-tab__pane">
-  tab index: 1
+  Top, tab index: 0
   <ul class="van-cascader__options">
     <li class="van-cascader__option van-cascader__option--selected">
       <span>
@@ -17,20 +28,10 @@ exports[` should allow more custom content 1`] = `
       </span>
     </li>
   </ul>
+  Bottom, tab index: 0
 </div>
 `;
 
-exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
-</i>
-`;
-
-exports[`should render option slot correctly 1`] = `
-<li class="van-cascader__option">
-  Custom Option foo
-</li>
-`;
-
 exports[`should render title slot correctly 1`] = `
 <h2 class="van-cascader__title">
   Custom Title
diff --git a/packages/vant/src/cascader/test/index.spec.ts b/packages/vant/src/cascader/test/index.spec.ts
index ffac0da0d..5241d3eae 100644
--- a/packages/vant/src/cascader/test/index.spec.ts
+++ b/packages/vant/src/cascader/test/index.spec.ts
@@ -242,10 +242,11 @@ test('should allow to custom the color of option', async () => {
   expect(option.style.color).toEqual('red');
 });
 
-test(' should allow more custom content', async () => {
+test('should render options-top、options-bottom slots correctly', async () => {
   const wrapper = mount(Cascader, {
     slots: {
-      'options-top': ({ tabIndex }) => `tab index: ${tabIndex}`,
+      'options-top': ({ tabIndex }) => `Top, tab index: ${tabIndex}`,
+      'options-bottom': ({ tabIndex }) => `Bottom, tab index: ${tabIndex}`,
     },
     props: {
       options,