chore(Cascader): fix some issues (#9756)

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>

packages/vant/src/cascader/README.md

@@ -200,16 +200,17 @@ export default {
 ### Custom Content
 
 ```html
-<van-cascader
+<van-cascader v-model="code" title="Select Area" :options="options">
-  v-model="code"
+  <template #options-top="{ tabIndex }">
-  title="Select Area"
+    <div class="current-level">Current level is {{ tabIndex }}</div>
-  :options="options"
-  :field-names="fieldNames"
->
-  <template #options-top="{ activeTab }">
-    <span>Current level {{activeTab}}</span>
   </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
 

packages/vant/src/cascader/README.zh-CN.md

@@ -210,16 +210,17 @@ export default {
 ### 自定义选项上方内容
 
 ```html
-<van-cascader
+<van-cascader v-model="code" title="请选择所在地区" :options="options">
-  v-model="code"
+  <template #options-top="{ tabIndex }">
-  title="请选择所在地区"
+    <div class="current-level">当前为第 {{ tabIndex }} 级</div>
-  :options="options"
-  :field-names="fieldNames"
->
-  <template #options-top="{ activeTab }">
-    <span>当前为第{{ tabIndex }}级</span>
   </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 }_ |
 
 ### 类型定义
 

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 }">
+        <template #options-top="{ tabIndex }">
-          <span>当前为第{{ activeTab }}级</span>
+          <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>

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>
 `;

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>

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(wrapper.find('.van-tab__pane').html()).toMatchSnapshot();
-    expect(top.text()).toBe('1');
-  });
 });

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);