feat(Picker): add option props (#1623)

* feat(Picker): add option props * test: update snapshots
Tencent · Oct 17, 2024 · 951216e · 951216e
1 parent 1f79b61
commit 951216e
Show file tree

Hide file tree

Showing 12 changed files with 2,148 additions and 3 deletions.
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/index.test.jsx.snap
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/picker/demos/base.vue b/src/picker/demos/base.vue
@@ -9,13 +9,16 @@
       @confirm="onConfirm"
       @cancel="cityState.show = false"
       @pick="onPick"
-    />
+    >
+      <template #option="item">{{ item.label }}</template></t-picker
+    >
   </t-popup>
 
   <t-popup v-model="seasonState.show" placement="bottom">
     <t-picker
       v-model="seasonState.season"
       :columns="seasonColumns"
+      :option="option"
       @confirm="onConfirm"
       @cancel="onCancel"
       @pick="onPick"
@@ -26,6 +29,11 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 import { PickerValue } from 'tdesign-mobile-vue';
+import type { PickerColumnItem } from 'tdesign-mobile-vue';
+
+const option = (item: PickerColumnItem, index: number) => {
+  return item.label;
+};
 
 const cityOptions = () => {
   return [

diff --git a/src/picker/picker-item.tsx b/src/picker/picker-item.tsx
@@ -97,7 +97,11 @@ export default defineComponent({
         <ul ref={root} class={className.value}>
           {(props.options || []).map((option, index) => (
             <li key={index} class={itemClassName.value}>
-              {props.renderLabel ? props.renderLabel(option) : option?.label}
+              {context.slots.option ? (
+                context.slots.option(option, index)
+              ) : (
+                <>{props.renderLabel ? props.renderLabel(option) : option?.label}</>
+              )}
             </li>
           ))}
         </ul>

diff --git a/src/picker/picker.en-US.md b/src/picker/picker.en-US.md
@@ -10,6 +10,7 @@ cancelBtn | String / Boolean | true | Typescript：`boolean \| string` | N
 columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | Typescript：`boolean \| string` | N
 header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+option | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N
 title | String | '' | \- | N
 value | Array | - | `v-model` and `v-model:value` is supported。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N

diff --git a/src/picker/picker.md b/src/picker/picker.md
@@ -11,6 +11,7 @@ cancelBtn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean
 columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | 确定按钮文字。TS 类型：`boolean \| string` | N
 header | Slot / Function | - | 自定义头部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+option | Slot / Function | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
 title | String | '' | 标题 | N
 value | Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N

diff --git a/src/picker/picker.tsx b/src/picker/picker.tsx
@@ -23,7 +23,7 @@ export default defineComponent({
   components: { PickerItem },
   props: PickerProps,
   emits: ['change', 'cancel', 'pick', 'update:modelValue', 'update:value'],
-  setup(props) {
+  setup(props, { slots }) {
     const pickerClass = usePrefixClass('picker');
     const { globalConfig } = useConfig('picker');
     const renderTNodeJSX = useTNodeJSX();
@@ -116,6 +116,7 @@ export default defineComponent({
             {realColumns.value.map((item, index) => (
               <div key={index} class={`${pickerClass.value}-item__group`}>
                 <picker-item
+                  v-slots={{ option: slots.option || props.option }}
                   ref={(item: any) => setPickerItemRef(item, index)}
                   options={item}
                   value={pickerValue.value?.[index]}

diff --git a/src/picker/props.ts b/src/picker/props.ts
@@ -28,6 +28,10 @@ export default {
   header: {
     type: Function as PropType<TdPickerProps['header']>,
   },
+  /** 自定义选项内容。参数为 `option: PickerColumnItem, index: number` */
+  option: {
+    type: Function as PropType<TdPickerProps['option']>,
+  },
   /** 自定义label */
   renderLabel: {
     type: Function as PropType<TdPickerProps['renderLabel']>,

diff --git a/src/picker/type.ts b/src/picker/type.ts
@@ -26,6 +26,10 @@ export interface TdPickerProps {
    * 自定义头部内容
    */
   header?: TNode;
+  /**
+   * 自定义选项内容。参数为 `option: PickerColumnItem, index: number`
+   */
+  option?: TNode;
   /**
    * 自定义label
    */