From 5d85f9ca9e7c08ab12d8a1bf17cc9bfb8f6f2139 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 30 Oct 2021 20:14:51 +0800
Subject: [PATCH] chore(Cascader): fix some issues (#9756)

---
 packages/vant/src/cascader/Cascader.tsx       |  2 +-
 packages/vant/src/cascader/README.md          | 25 ++++++++-----------
 packages/vant/src/cascader/README.zh-CN.md    | 25 ++++++++-----------
 packages/vant/src/cascader/demo/index.vue     | 16 +++++++++---
 .../test/__snapshots__/demo.spec.ts.snap      | 23 +++++++++++++++++
 .../test/__snapshots__/index.spec.ts.snap     | 20 +++++++++++++++
 packages/vant/src/cascader/test/index.spec.ts | 11 ++++----
 packages/vant/src/utils/create.ts             |  2 +-
 8 files changed, 82 insertions(+), 42 deletions(-)

diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index 20651d7a8..6c72f845f 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -259,7 +259,7 @@ export default defineComponent({
           })}
         >
           {slots['options-top']
-            ? slots['options-top']({ activeTab: activeTab.value })
+            ? slots['options-top']({ tabIndex: activeTab.value })
             : null}
           {renderOptions(options, selected, tabIndex)}
         </Tab>
diff --git a/packages/vant/src/cascader/README.md b/packages/vant/src/cascader/README.md
index ed3658163..c7260f093 100644
--- a/packages/vant/src/cascader/README.md
+++ b/packages/vant/src/cascader/README.md
@@ -200,16 +200,17 @@ export default {
 ### Custom Content
 
 ```html
-<van-cascader
-  v-model="code"
-  title="Select Area"
-  :options="options"
-  :field-names="fieldNames"
->
-  <template #options-top="{ activeTab }">
-    <span>Current level {{activeTab}}</span>
+<van-cascader v-model="code" title="Select Area" :options="options">
+  <template #options-top="{ tabIndex }">
+    <div class="current-level">Current level is {{ tabIndex }}</div>
   </template>
 </van-cascader>
+
+<style>
+  .current-level {
+    padding: 10px 16px 0;
+  }
+</style>
 ```
 
 ```js
@@ -218,11 +219,6 @@ import { ref } from 'vue';
 export default {
   setup() {
     const code = ref('');
-    const fieldNames = {
-      text: 'name',
-      value: 'code',
-      children: 'items',
-    };
     const options = [
       {
         name: 'Zhejiang',
@@ -239,7 +235,6 @@ export default {
     return {
       code,
       options,
-      fieldNames,
     };
   },
 };
@@ -287,7 +282,7 @@ export default {
 | --- | --- | --- |
 | title | Custom title | - |
 | option `v3.1.4` | Custom option text | _{ option: Option, selected: boolean }_ |
-| options-top | Custom the content above options | - |
+| options-top `v3.2.7` | Custom the content above 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 4f3a3a81d..99b877e27 100644
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/packages/vant/src/cascader/README.zh-CN.md
@@ -210,16 +210,17 @@ export default {
 ### 自定义选项上方内容
 
 ```html
-<van-cascader
-  v-model="code"
-  title="请选择所在地区"
-  :options="options"
-  :field-names="fieldNames"
->
-  <template #options-top="{ activeTab }">
-    <span>当前为第{{ tabIndex }}级</span>
+<van-cascader v-model="code" title="请选择所在地区" :options="options">
+  <template #options-top="{ tabIndex }">
+    <div class="current-level">当前为第 {{ tabIndex }} 级</div>
   </template>
 </van-cascader>
+
+<style>
+  .current-level {
+    padding: 10px 16px 0;
+  }
+</style>
 ```
 
 ```js
@@ -228,11 +229,6 @@ import { ref } from 'vue';
 export default {
   setup() {
     const code = ref('');
-    const fieldNames = {
-      text: 'name',
-      value: 'code',
-      children: 'items',
-    };
     const options = [
       {
         name: '浙江省',
@@ -249,7 +245,6 @@ export default {
     return {
       code,
       options,
-      fieldNames,
     };
   },
 };
@@ -299,7 +294,7 @@ export default {
 | --- | --- | --- |
 | title | 自定义顶部标题 | - |
 | option `v3.1.4` | 自定义选项文字 | _{ option: Option, selected: boolean }_ |
-| options-top | 自定义选项上方的内容 | - |
+| options-top `v3.2.7` | 自定义选项上方的内容 | _{ tabIndex: number }_ |
 
 ### 类型定义
 
diff --git a/packages/vant/src/cascader/demo/index.vue b/packages/vant/src/cascader/demo/index.vue
index 041c824e7..92a354d19 100644
--- a/packages/vant/src/cascader/demo/index.vue
+++ b/packages/vant/src/cascader/demo/index.vue
@@ -26,8 +26,9 @@ const t = useTranslate({
       { text: '杭州市', value: '330100' },
       { text: '宁波市', value: '330200' },
     ],
+    currentLevel: (level: number) => `当前为第 ${level} 级`,
+    customContent: '自定义选项上方内容',
     customFieldNames: '自定义字段名',
-    customContent: '自定义内容',
   },
   'en-US': {
     area: 'Area',
@@ -46,8 +47,9 @@ const t = useTranslate({
       { text: 'Hangzhou', value: '330100' },
       { text: 'Ningbo', value: '330200' },
     ],
-    customFieldNames: 'Custom Field Names',
+    currentLevel: (level: number) => `Current level is ${level}`,
     customContent: 'Custom Content',
+    customFieldNames: 'Custom Field Names',
   },
 });
 
@@ -268,10 +270,16 @@ const onFinish = (
         @close="customContentState.show = false"
         @finish="onFinish(customContentState, $event)"
       >
-        <template #options-top="{ activeTab }">
-          <span>当前为第{{ activeTab }}级</span>
+        <template #options-top="{ tabIndex }">
+          <div class="current-level">{{ t('currentLevel', tabIndex) }}</div>
         </template>
       </van-cascader>
     </van-popup>
   </demo-block>
 </template>
+
+<style lang="less">
+.current-level {
+  padding: 10px 16px 0;
+}
+</style>
diff --git a/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap
index fc9aa2a91..5ac3de7b0 100644
--- a/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/demo.spec.ts.snap
@@ -93,4 +93,27 @@ exports[`should render demo and match snapshot 1`] = `
     </i>
   </div>
 </div>
+<div>
+  <div class="van-cell van-cell--clickable van-field"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title van-field__label">
+      <label>
+        Area
+      </label>
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body">
+        <input type="text"
+               class="van-field__control"
+               readonly
+               placeholder="Select Area"
+        >
+      </div>
+    </div>
+    <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
+    </i>
+  </div>
+</div>
 `;
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 cd6ca59c7..7190d9610 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -1,5 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[` should allow more custom content 1`] = `
+<div class="van-tab__pane">
+  tab index: 1
+  <ul class="van-cascader__options">
+    <li class="van-cascader__option van-cascader__option--selected">
+      <span>
+        Zhejiang
+      </span>
+      <i class="van-badge__wrapper van-icon van-icon-success van-cascader__selected-icon">
+      </i>
+    </li>
+    <li class="van-cascader__option">
+      <span>
+        Jiangsu
+      </span>
+    </li>
+  </ul>
+</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">
 </i>
diff --git a/packages/vant/src/cascader/test/index.spec.ts b/packages/vant/src/cascader/test/index.spec.ts
index 4869914af..ffac0da0d 100644
--- a/packages/vant/src/cascader/test/index.spec.ts
+++ b/packages/vant/src/cascader/test/index.spec.ts
@@ -245,19 +245,18 @@ test('should allow to custom the color of option', async () => {
 test(' should allow more custom content', async () => {
   const wrapper = mount(Cascader, {
     slots: {
-      'options-top': ({ activeTab }) => activeTab,
+      'options-top': ({ tabIndex }) => `tab index: ${tabIndex}`,
     },
     props: {
       options,
     },
   });
+
   await later();
-  wrapper
+  await wrapper
     .findAll('.van-cascader__options')[0]
     .find('.van-cascader__option')
     .trigger('click');
-  wrapper.vm.$nextTick(() => {
-    const top = wrapper.find('.van-tab__pane');
-    expect(top.text()).toBe('1');
-  });
+
+  expect(wrapper.find('.van-tab__pane').html()).toMatchSnapshot();
 });
diff --git a/packages/vant/src/utils/create.ts b/packages/vant/src/utils/create.ts
index 182348e18..88293d81f 100644
--- a/packages/vant/src/utils/create.ts
+++ b/packages/vant/src/utils/create.ts
@@ -6,7 +6,7 @@ import locale from '../locale';
 export function createTranslate(name: string) {
   const prefix = camelize(name) + '.';
 
-  return (path: string, ...args: unknown[]): string => {
+  return (path: string, ...args: unknown[]) => {
     const messages = locale.messages();
     const message = get(messages, prefix + path) || get(messages, path);