[修正] 选择器右下角的当前值提示问题

src/component/datePicker/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef">
-      <<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name"
+      <lay-input :name="name" :value="dateValue || modelValue" readonly>
-          :value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix>
+        <template #prefix>
           <lay-icon type="layui-icon-date"></lay-icon>
         </template>
       </lay-input>
@@ -11,14 +11,26 @@
         <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
-                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i><i
+              <i
-                  class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+              ></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-m"
+                @click="changeYearOrMonth('month', -1)"
+              ></i>
               <div class="laydate-set-ym">
-                  <span @click="showYearPanel">{{ currentYear }} 年</span><span
+                <span @click="showYearPanel">{{ currentYear }} 年</span>
-                    @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
               </div>
-                <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i><i
+              <i
-                  class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+                class="layui-icon laydate-icon laydate-next-m"
+                @click="changeYearOrMonth('month', 1)"
+              ></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+              ></i>
             </div>
             <div class="layui-laydate-content">
               <table>
@@ -28,19 +40,26 @@
                   </tr>
                 </thead>
                 <tbody>
-                    <template v-for="(o, i) of dateList.length % 7 == 0
+                  <template
+                    v-for="(o, i) of dateList.length % 7 == 0
                     ? dateList.length / 7
-                    : Math.floor(dateList.length / 7) + 1" :key="i">
+                    : Math.floor(dateList.length / 7) + 1"
+                    :key="i"
+                  >
                     <tr>
-                        <td v-for="(item, index) of dateList.slice(
+                      <td
+                        v-for="(item, index) of dateList.slice(
                           i * 7,
                           i * 7 + 7
-                        )" :key="index" :data-unix="item.value" :class="{
+                        )"
+                        :key="index"
+                        :data-unix="item.value"
+                        :class="{
                           'laydate-day-prev': item.type !== 'current',
                           'layui-this': item.value === currentDay,
-}" @click="handleDayClick(item)">
+                        }"
-                          {{ item.day }}
+                        @click="handleDayClick(item)"
-                        </td>
+                      >{{ item.day }}</td>
                     </tr>
                   </template>
                 </tbody>
@@ -48,14 +67,19 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-              <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
+            <span
+              v-if="type === 'datetime'"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+            >选择时间</span>
             <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-                  @click="ok">确定</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
+
         <!-- 年份选择器 -->
         <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
@@ -66,61 +90,76 @@
             </div>
             <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
               <ul class="layui-laydate-list laydate-year-list">
-                  <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
+                <li
-                    @click="handleYearClick(item)">
+                  v-for="item of yearList"
-                    {{ item }}
+                  :key="item"
-                  </li>
+                  :class="[{ 'layui-this': currentYear === item }]"
+                  @click="handleYearClick(item)"
+                >{{ item }}</li>
               </ul>
             </div>
           </div>
           <div class="layui-laydate-footer">
-              <!-- <span
+            <span
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-            >2022</span>-->
+            >{{ dateValue }}</span>
             <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-                  @click="ok">确定</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
+
         <!-- 月份选择器 -->
         <div class="layui-laydate" v-show="showPane === 'month'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
-                <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+              ></i>
               <div class="laydate-set-ym">
-                  <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
+                <span
-                    年</span>
+                  @click="showYearPanel"
+                  v-if="showPane === 'date' || showPane === 'datetime'"
+                >{{ currentYear }} 年</span>
                 <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
               </div>
-                <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+              ></i>
             </div>
             <div class="layui-laydate-content" style="height: 220px">
               <ul class="layui-laydate-list laydate-month-list">
-                  <li v-for="item of MONTH_NAME" :key="item" :class="[
+                <li
+                  v-for="item of MONTH_NAME"
+                  :key="item"
+                  :class="[
                     { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                  ]" @click="handleMonthClick(item)">
+                  ]"
-                    {{ item.slice(0, 3) }}
+                  @click="handleMonthClick(item)"
-                  </li>
+                >{{ item.slice(0, 3) }}</li>
               </ul>
             </div>
           </div>
           <div class="layui-laydate-footer">
-              <!-- <span
+            <span
               class="layui-laydate-preview"
               title="当前选中的结果"
               style="color: rgb(102, 102, 102)"
-            >2021-03</span>-->
+            >{{ dateValue }}</span>
             <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-                  @click="ok">确定</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
+
         <!-- 时间选择器 -->
         <div class="layui-laydate" v-if="showPane == 'time'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
@@ -133,15 +172,19 @@
               <ul class="layui-laydate-list laydate-time-list">
                 <li class="num-list" v-for="item in els" :key="item.type">
                   <ol class="scroll" @click="choseTime">
-                      <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
+                    <li
-                        :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
+                      v-for="(it, index) in item.count"
+                      :id="item.type + index.toString()"
+                      :data-value="index.toString().padStart(2, '0')"
+                      :data-type="item.type"
+                      :key="it"
+                      :class="[
                         'num',
                         index.toString().padStart(2, '0') == hms[item.type]
                           ? 'layui-this'
                           : '',
-                        ]">
+                      ]"
-                        {{ index.toString().padStart(2, "0") }}
+                    >{{ index.toString().padStart(2, "0") }}</li>
-                      </li>
                   </ol>
                 </li>
               </ul>
@@ -150,9 +193,9 @@
           <div class="layui-laydate-footer">
             <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
             <div class="laydate-footer-btns">
-                <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                  class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-                  @click="ok">确定</span>
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
             </div>
           </div>
         </div>
@@ -240,9 +283,34 @@ const dateValue = computed<string>(() => {
     return "";
   }
   let momentVal;
-  let momentObj = moment(currentDay.value || props.modelValue)
+  let momentObj = moment(currentDay.value)
-  momentVal = momentObj.format(fmtMap[props.type])
+    .hour(hms.value.hh)
-  if (momentVal != props.modelValue)
+    .minute(hms.value.mm)
+    .second(hms.value.ss);
+
+  switch (props.type) {
+    case "date":
+      momentVal = momentObj.format("YYYY-MM-DD");
+      break;
+    case "datetime":
+      momentVal = momentObj.format("YYYY-MM-DD HH:mm:ss");
+      break;
+    case "year":
+      momentVal = momentObj.format("YYYY");
+      break;
+    case "month":
+      momentVal = momentObj.format("MM");
+      break;
+    case "time":
+      momentVal = momentObj.format("HH:mm:ss");
+      break;
+    case "yearmonth":
+      momentVal = momentObj.format("YYYY-MM");
+      break;
+    default:
+      momentVal = momentObj.format();
+      break;
+  }
   $emits("update:modelValue", momentVal);
   return momentVal;
 });