feat: 日期组件增加清除按钮

components/DatePicker/DatePicker.vue

 <template>
   <view class="timer">
     <NormalTitle :elementInfo="elementInfo"></NormalTitle>
-		<view class="date-wrap">
+    <view class="input-group">
       <u-input
-				style="width:100%"
+        style="width: 100%"
         placeholder="请输入日期"
         v-model="pickerValue"
         type="select"
         :select-open="show"
         :border="true"
         :borderColor="elementInfo.option.dateTime.borderColor"
-				:custom-style="{color: elementInfo.option.dateTime.color}"
+        :custom-style="{ color: elementInfo.option.dateTime.color }"
         @click="show = true"
       ></u-input>
+      <u-icon
+        class="close-icon"
+        v-if="pickerValue"
+        name="close-circle"
+        @click.prevent.stop="handleClearValue"
+      ></u-icon>
     </view>
     <u-picker
       mode="time"
@@ -24,8 +30,8 @@
   </view>
 </template>
 <script>
-	export default {
-		name: "DatePicker",
+export default {
+  name: 'DatePicker',
   props: {
     elementInfo: {
       type: Object,
@@ -52,61 +58,98 @@
       },
       show: false,
       pickerValue: ''
-				
-			};
+    }
   },
   mounted() {
     let { date } = this.elementInfo.option.dateTime
-			if(!date) date = new Date()
+    if (!date) date = new Date()
     this.pickerValue = this.dateTimeFormat(date)
   },
   methods: {
-			timeConfirm(e){
+    timeConfirm(e) {
       const year = e.year
       const month = e.month
       const day = e.day
-				const hour =e.hour
+      const hour = e.hour
       const minute = e.minute
       const second = e.second
-				if(this.elementInfo.option.dateTime.showTime) {
+      if (this.elementInfo.option.dateTime.showTime) {
         this.pickerValue = `${year}-${month}-${day} ${hour}:${minute}:${second}`
       } else {
         this.pickerValue = `${year}-${month}-${day}`
       }
-				const { index, paramName, data } = this.elementInfo.child
-				if(index.length) {
-					uni.$emit('handleLinkParams', { index, paramName, value: this.pickerValue })	
+      this.handleEmitValue()
+    },
+    handleEmitValue() {
+      const { index, paramName } = this.elementInfo.child
+      if (index.length) {
+        uni.$emit('handleLinkParams', {
+          index,
+          paramName,
+          value: this.pickerValue
+        })
       }
     },
+    /** 清除值 */
+    handleClearValue() {
+      this.pickerValue = ''
+      this.handleEmitValue()
+    },
     // 日期时间格式化
-			dateTimeFormat(val){
+    dateTimeFormat(val) {
       const date = new Date(val)
       const year = date.getFullYear()
       // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
-				const month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-				const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-				const hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-				const minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-				const seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      const month =
+        date.getMonth() + 1 < 10
+          ? '0' + (date.getMonth() + 1)
+          : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      const hours =
+        date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+      const minutes =
+        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+      const seconds =
+        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
       // 拼接
-				if(this.elementInfo.option.dateTime.showTime) {
-					return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+      if (this.elementInfo.option.dateTime.showTime) {
+        return (
+          year +
+          '-' +
+          month +
+          '-' +
+          day +
+          ' ' +
+          hours +
+          ':' +
+          minutes +
+          ':' +
+          seconds
+        )
       }
-				return year + "-" + month + "-" + day;
-
-			},
+      return year + '-' + month + '-' + day
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-	.timer {
+.timer {
   position: relative;
   z-index: 999999;
   display: flex;
   flex-flow: column;
   justify-content: center;
   width: 100%;
-	}
+}
+.input-group {
+  position: relative;
+}
+.close-icon {
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
 </style>
-