fix(picker): className option (#2926)

jdf2e · Feb 19, 2024 · 1aa7d68 · 1aa7d68
1 parent fef26d9
commit 1aa7d68
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 5 deletions.
diff --git a/src/packages/__VUE/picker/Column.vue b/src/packages/__VUE/picker/Column.vue
@@ -11,7 +11,10 @@
         <view
           v-if="item && item[fieldNames.text] && threeDimensional"
           class="nut-picker-roller-item"
-          :class="{ 'nut-picker-roller-item-hidden': isHidden(index + 1) }"
+          :class="{
+            'nut-picker-roller-item-hidden': isHidden(index + 1),
+            [item[fieldNames.className]]: item[fieldNames.className]
+          }"
           :style="setRollerStyle(index + 1)"
         >
           {{ item[fieldNames.text] }}
@@ -20,6 +23,9 @@
         <view
           v-if="item && item[fieldNames.text] && !threeDimensional"
           class="nut-picker-roller-item-tile"
+          :class="{
+            [item[fieldNames.className]]: item[fieldNames.className]
+          }"
           :style="{ height: pxCheck(optionHeight), lineHeight: pxCheck(optionHeight) }"
         >
           {{ item[fieldNames.text] }}

diff --git a/src/packages/__VUE/picker/doc.en-US.md b/src/packages/__VUE/picker/doc.en-US.md
@@ -60,7 +60,7 @@ Use the children field of the Columns attribute to cascade options
 | --- | --- | --- | --- |
 | v-model:value | Default Index | Array | `[]` |
 | columns | Columns data | PickerOption[] \| PickerOption[][] | - |
-| field-names`v4.1.4` | custom columns field | object | `{ text: 'text', value: 'value', children: 'children' }` |
+| field-names`v4.1.4` | custom columns field | object | `{ text: 'text', value: 'value', children: 'children', className: 'className' }` |
 | title | Toolbar title | string | - |
 | cancel-text | Text of cancel button | string | `cancel` |
 | ok-text | Text of confirm button | string | `confirm` |

diff --git a/src/packages/__VUE/picker/doc.md b/src/packages/__VUE/picker/doc.md
@@ -68,7 +68,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | --- | --- | --- | --- |
 | v-model:value | 默认选中项 | Array | `[]` |
 | columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - |
-| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` |
+| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children', className: 'className' }` |
 | title | 设置标题 | string | - |
 | cancel-text | 取消按钮文案 | string | `取消` |
 | ok-text | 确定按钮文案 | string | `确定` |

diff --git a/src/packages/__VUE/picker/doc.taro.md b/src/packages/__VUE/picker/doc.taro.md
@@ -62,7 +62,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
 | --- | --- | --- | --- |
 | v-model:value | 默认选中项 | Array | `[]` |
 | columns | 对象数组，配置每一列显示的数据 | PickerOption[] \| PickerOption[][] | - |
-| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children' }` |
+| field-names`v4.1.4` | 自定义 columns 中的字段 | object | `{ text: 'text', value: 'value', children: 'children', className: 'className' }` |
 | title | 设置标题 | string | - |
 | cancel-text | 取消按钮文案 | string | `取消` |
 | ok-text | 确定按钮文案 | string | `确定` |

diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
@@ -32,6 +32,9 @@
           v-for="(item, index) in column"
           :key="item[columnFieldNames.value] ?? index"
           class="nut-picker-roller-item-tarotile"
+          :class="{
+            [item[columnFieldNames.className]]: item[columnFieldNames.className]
+          }"
           :style="{
             lineHeight: pxCheck(optionHeight)
           }"

diff --git a/src/packages/__VUE/picker/types.ts b/src/packages/__VUE/picker/types.ts
@@ -20,4 +20,5 @@ export interface PickerFieldNames {
   text?: string;
   value?: string;
   children?: string;
+  className?: string;
 }
diff --git a/src/packages/__VUE/picker/usePicker.ts b/src/packages/__VUE/picker/usePicker.ts
@@ -4,7 +4,8 @@ import { PickerOption, PickerFieldNames } from './types';
 const DEFAULT_FILED_NAMES = {
   text: 'text',
   value: 'value',
-  children: 'children'
+  children: 'children',
+  className: 'className'
 };
 
 export const usePicker = (props: any, emit: any) => {