feat(Cascader): add level parameter to pick event (#940)

Tencent · Jul 11, 2023 · 0fd205d · 0fd205d
1 parent 759c037
commit 0fd205d
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
@@ -299,7 +299,7 @@ describe('cascader', () => {
       await $radios[clickIndex].find(`.t-radio`).trigger('click');
       expect(onPick).toHaveBeenCalledTimes(1);
       expect($radios[clickIndex].findAll(`.t-radio__icon--checked`)).toHaveLength(1);
-      expect(onPick).toHaveBeenCalledWith({ index: 0, value: '110000' });
+      expect(onPick).toHaveBeenCalledWith({ level: 0, index: 0, value: '110000' });
       const $step = wrapper.findAll(`.${name}__step`);
       expect($step).toHaveLength(2);
 

diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
@@ -17,12 +17,12 @@ defaultValue | String / Number | - | uncontrolled property | N
 visible | Boolean | false | \- | N
 onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: string[]) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | Typescript：`(value: string \| number, index: number) => void`<br/> | N
+onPick | Function |  | Typescript：`(context: { level: number; value: string | number; index: number }) => void`<br/> | N
 
 ### Cascader Events
 
 name | params | description
 -- | -- | --
 change | `(value: string \| number, selectedOptions: string[])` | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
-pick | `(value: string \| number, index: number)` | \-
+pick | `(context: { level: number, value: string \| number, index: number })` | \-
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
@@ -16,12 +16,12 @@ defaultValue | String / Number | - | 选项值。非受控属性 | N
 visible | Boolean | false | 是否展示 | N
 onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: string[]) => void`<br/>值发生变更时触发 | N
 onClose | Function |  | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | TS 类型：`(value: string \| number, index: number) => void`<br/>选择后触发 | N
+onPick | Function |  | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N
 
 ### Cascader Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: string \| number, selectedOptions: string[])` | 值发生变更时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
-pick | `(value: string \| number, index: number)` | 选择后触发
+pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发
diff --git a/src/cascader/cascader.vue b/src/cascader/cascader.vue
@@ -202,8 +202,7 @@ export default defineComponent({
       if (item.disabled) {
         return;
       }
-
-      props.onPick?.({ value: item[keys.value?.value ?? 'value'], index });
+      props.onPick?.({ level, value: item[keys.value?.value ?? 'value'], index });
 
       if (item[(keys as Ref<KeysType>).value?.children ?? 'children']?.length) {
         items[level + 1] = item[(keys as Ref<KeysType>).value?.children ?? 'children'];

diff --git a/src/cascader/demos/base.vue b/src/cascader/demos/base.vue
@@ -1,6 +1,13 @@
 <template>
   <t-cell title="地址" :note="note" arrow @click="showCascader" />
-  <t-cascader v-model:visible="visible" :value="address" title="选择地址" :options="options" @change="onChange" />
+  <t-cascader
+    v-model:visible="visible"
+    :value="address"
+    title="选择地址"
+    :options="options"
+    @pick="onPick"
+    @change="onChange"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -79,4 +86,8 @@ const onChange = (value: string, options: any) => {
 const showCascader = () => {
   visible.value = true;
 };
+
+const onPick = (context: { level: number; value: string | number; index: number }) => {
+  console.log(`level: ${context.level}, value: ${context.value}, index: ${context.index}`);
+};
 </script>
diff --git a/src/cascader/type.ts b/src/cascader/type.ts
@@ -63,7 +63,7 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   /**
    * 选择后触发
    */
-  onPick?: (value: string | number, index: number) => void;
+  onPick?: (context: { level: number; value: string | number; index: number }) => void;
 }
 
 export type TriggerSource = 'overlay' | 'close-btn' | 'finish';