From b850c8a663d71c4dc963c629ecf8bc1286852354 Mon Sep 17 00:00:00 2001
From: 810505339 <810505339@qq.com>
Date: Sat, 25 Jan 2025 23:25:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20DatetimePicker=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89icon(#861)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/datetime-picker.md             | 43 +++++++++++++++++++
 src/pages/datetimePicker/Index.vue            | 22 +++++++++-
 .../wd-datetime-picker/wd-datetime-picker.vue |  4 +-
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
index e1fed8876..97eaeca52 100644
--- 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
index 7c4e5cc6a..41772e09f 100644
--- 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
index f92e31096..687e31403 100644
--- 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>