feat(wd-datetime-picker): datetime-picker 增加自定义 Cell 样式属性

Moonofweisheng · Aug 5, 2024 · 1d618e2 · 1d618e2
1 parent 1c13f2e
commit 1d618e2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
@@ -334,5 +334,6 @@ const displayFormatTabLabel = (items) => {
 | 类名 | 说明 | 最低版本 |
 |-----|------|--------|
 | custom-view-class | pickerView 外部自定义样式 | - |
+| custom-cell-class | pickerView cell 外部自定义样式 | - |
 | custom-label-class | label 外部自定义样式 | - |
 | custom-value-class | value 外部自定义样式 | - |
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
@@ -155,6 +155,10 @@ export const datetimePickerProps = {
    * 表单验证规则，结合wd-form组件使用
    */
   rules: makeArrayProp<FormItemRule>(),
+  /**
+   * picker cell 外部自定义样式
+   */
+  customCellClass: makeStringProp(''),
   /**
    * pickerView 外部自定义样式
    */

diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -8,7 +8,7 @@
     <!--文案-->
     <view class="wd-picker__field" @click="showPopup">
       <slot v-if="useDefaultSlot"></slot>
-      <view v-else class="wd-picker__cell">
+      <view v-else :class="['wd-picker__cell', customCellClass]">
         <view
           v-if="label || useLabelSlot"
           :class="`wd-picker__label ${customLabelClass} ${isRequired ? 'is-required' : ''}`"