feat: ✨ DatetimePicker 支持自定义icon(Moonofweisheng#861)

810505339 · Jan 25, 2025 · b850c8a · b850c8a
1 parent e5a24c4
commit b850c8a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 2 deletions.
diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
@@ -252,6 +252,48 @@ const displayFormatTabLabel = (items) => {
 }
 
 ```
+## 自定义icon
+
+通过 `icon`插槽自定义icon。
+
+```html
+ <wd-datetime-picker label="可清空的" v-model="value18">
+        <template #icon="{ disabled, readonly }">
+          <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" :name="iconName" @tap.stop="clear" />
+        </template>
+      </wd-datetime-picker>
+```
+
+```typescript
+const value18 = ref<string>('')
+/* computed */
+const iconName = computed(() => {
+  return value18.value ? 'error-fill' : 'arrow-right'
+})
+const clear = () => {
+  if (iconName.value === 'arrow-right') {
+    return
+  }
+  value18.value = ''
+}
+```
+
+## 自定义展示文案
+
+给 `display-format` 属性传入一个函数，接收所有选中项数组，返回展示的文本内容。
+
+```html
+<wd-datetime-picker v-model="value" label="自定义展示文案" :display-format="displayFormat" @confirm="handleConfirm" />
+```
+
+```typescript
+const value = ref<string>('')
+
+function handleConfirm({ value }) {
+
+}
+
+
 
 ## Attributes
 
@@ -326,6 +368,7 @@ const displayFormatTabLabel = (items) => {
 |------|-----|---------|
 | default | 使用默认插槽 | - |
 | label | 左侧标题插槽 | - |
+| icon | 图标插槽 | {disabled, readonly} ,{是否禁用，是否只读} |
 
 ## 外部样式类
 

diff --git a/src/pages/datetimePicker/Index.vue b/src/pages/datetimePicker/Index.vue
@@ -33,6 +33,13 @@
     <demo-block title="范围tab展示格式" transparent>
       <wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
     </demo-block>
+    <demo-block title="可清空的" transparent>
+      <wd-datetime-picker label="可清空的" v-model="value18">
+        <template #icon="{ disabled, readonly }">
+          <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" :name="iconName" @tap.stop="clear" />
+        </template>
+      </wd-datetime-picker>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -43,7 +50,7 @@ import type {
   DatetimePickerDisplayFormatTabLabel,
   DatetimePickerInstance
 } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 const value1 = ref<string>('')
 const value2 = ref<number>(Date.now())
@@ -62,10 +69,23 @@ const value14 = ref<any[]>(['', ''])
 const value15 = ref<any[]>(['', Date.now()])
 const value16 = ref(Date.now())
 const value17 = ref(Date.now())
+const value18 = ref<string>('')
 
 const minDate = ref<number>(Date.now())
 const maxDate = ref<number>(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime())
 
+/* computed */
+const iconName = computed(() => {
+  return value18.value ? 'error-fill' : 'arrow-right'
+})
+
+const clear = () => {
+  if (iconName.value === 'arrow-right') {
+    return
+  }
+  value18.value = ''
+}
+
 const formatter: DatetimePickerViewFormatter = (type, value) => {
   switch (type) {
     case 'year':

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
@@ -38,7 +38,9 @@
                 {{ showValue ? showValue : placeholder || translate('placeholder') }}
               </view>
             </view>
-            <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+            <slot name="icon" :disabled="disabled" :readonly="readonly">
+              <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+            </slot>
           </view>
           <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
         </view>