🐛(component): datepicker 开启simple后点击无效,修复上一次更新带来的影响

package/component/src/component/datePicker/index.vue

@@ -1,48 +1,22 @@
 <template>
   <div>
     <lay-dropdown ref="dropdownRef" :disabled="props.disabled">
-      <lay-input
+      <lay-input readonly :name="name" :model-value="dateValue || modelValue" :placeholder="placeholder"
-        readonly
+        prefix-icon="layui-icon-date">
-        :name="name"
-        :model-value="dateValue || modelValue"
-        :placeholder="placeholder"
-        prefix-icon="layui-icon-date"
-      >
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <div
+        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
-          class="layui-laydate"
-          v-show="showPane === 'date' || showPane === 'datetime'"
-        >
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
-              <i
+              <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
-                class="layui-icon laydate-icon laydate-prev-y"
+              <i class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
-                @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 @click="showPane = 'month'"
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
-                  >{{ currentMonth + 1 }} 月</span
-                >
               </div>
-              <i
+              <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i>
-                class="layui-icon laydate-icon laydate-next-m"
+              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
-                @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>
@@ -52,26 +26,17 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <template
+                  <template v-for="(o, i) of dateList.length % 7 == 0
-                    v-for="(o, i) of dateList.length % 7 == 0
                   ? dateList.length / 7
-                      : Math.floor(dateList.length / 7) + 1"
+                  : Math.floor(dateList.length / 7) + 1" :key="i">
-                    :key="i"
-                  >
                     <tr>
-                      <td
+                      <td v-for="(item, index) of dateList.slice(
-                        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)">
-                        @click="handleDayClick(item)"
-                      >
                         {{ item.day }}
                       </td>
                     </tr>
@@ -81,69 +46,37 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span
+            <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now"
-                >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
         <!-- 年份选择器 -->
-        <div
+        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
-          class="layui-laydate"
-          v-show="showPane === 'year' || showPane === 'yearmonth'"
-        >
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
                 <span class="laydate-time-text">选择年份</span>
               </div>
             </div>
-            <div
+            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
-              class="layui-laydate-content"
-              style="height: 220px; overflow-y: auto"
-            >
               <ul class="layui-laydate-list laydate-year-list">
-                <li
+                <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
-                  v-for="item of yearList"
+                  @click="handleYearClick(item)">
-                  :key="item"
-                  :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)">{{ dateValue }}</span>
-              class="layui-laydate-preview"
-              title="当前选中的结果"
-              style="color: rgb(102, 102, 102)"
-              >{{ dateValue }}</span
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now"
-                >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -151,59 +84,30 @@
         <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
+              <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
-                class="layui-icon laydate-icon laydate-prev-y"
-                @click="changeYearOrMonth('year', -1)"
-                ></i
-              >
               <div class="laydate-set-ym">
-                <span
+                <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
-                  @click="showYearPanel"
+                  年</span>
-                  v-if="showPane === 'date' || showPane === 'datetime'"
+                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
-                  >{{ currentYear }} 年</span
-                >
-                <span @click="showPane = 'month'"
-                  >{{ currentMonth + 1 }} 月</span
-                >
               </div>
-              <i
+              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></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
+                <li v-for="item of MONTH_NAME" :key="item" :class="[
-                  v-for="item of MONTH_NAME"
-                  :key="item"
-                  :class="[
                   { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                  ]"
+                ]" @click="handleMonthClick(item)">
-                  @click="handleMonthClick(item)"
-                >
                   {{ 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)">{{ dateValue }}</span>
-              class="layui-laydate-preview"
-              title="当前选中的结果"
-              style="color: rgb(102, 102, 102)"
-              >{{ dateValue }}</span
-            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now"
-                >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -219,19 +123,13 @@
               <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
+                    <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
-                      v-for="(it, index) in item.count"
+                      :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
-                      :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") }}
                     </li>
                   </ol>
@@ -240,22 +138,11 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span
+            <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</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 lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
-                >清空</span
+              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
-              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
-              <span lay-type="now" class="laydate-btns-now" @click="now"
-                >现在</span
-              >
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
-                >确定</span
-              >
             </div>
           </div>
         </div>
@@ -353,7 +240,6 @@ onMounted(() => {
 
 // 计算结果日期
 const dateValue = computed<string>(() => {
-  currentDay.value = new Date(props.modelValue).getTime();
   if (currentDay.value === -1) {
     $emits("update:modelValue", "");
     return "";
@@ -363,7 +249,6 @@ const dateValue = computed<string>(() => {
     .hour(hms.value.hh)
     .minute(hms.value.mm)
     .second(hms.value.ss);
-
   switch (props.type) {
     case "date":
       dayjsVal = dayjsObj.format("YYYY-MM-DD");
@@ -388,9 +273,12 @@ const dateValue = computed<string>(() => {
       break;
   }
   $emits("update:modelValue", dayjsVal);
-  if (props.simple) {
+  if (props.simple && unWatch.value) {
     ok();
   }
+  setTimeout(() => {
+    unWatch.value = false;
+  }, 0);
   return dayjsVal;
 });
 
@@ -444,7 +332,12 @@ watch(
   },
   { immediate: true }
 );
-
+const unWatch = ref(true)
+watch(() => props.modelValue, () => {
+  if (!unWatch.value) {
+    currentDay.value = new Date(props.modelValue).getTime();
+  }
+})
 // 确认事件
 const ok = () => {
   if (dropdownRef.value)
@@ -454,6 +347,7 @@ const ok = () => {
 
 // 现在时间
 const now = () => {
+  unWatch.value = true
   currentDay.value = dayjs().valueOf();
   hms.value.hh = dayjs().hour();
   hms.value.mm = dayjs().minute();
@@ -462,6 +356,7 @@ const now = () => {
 
 // 清空日期
 const clear = () => {
+  unWatch.value = true
   currentDay.value = -1;
 };
 
@@ -489,6 +384,7 @@ const showYearPanel = () => {
 
 // 点击年份
 const handleYearClick = (item: any) => {
+  unWatch.value = true
   currentYear.value = item;
   if (props.type === "year") {
     currentDay.value = dayjs().year(item).valueOf();
@@ -502,6 +398,7 @@ const handleYearClick = (item: any) => {
 
 // 点击月份
 const handleMonthClick = (item: any) => {
+  unWatch.value = true
   currentMonth.value = MONTH_NAME.indexOf(item);
   if (props.type === "month") {
     currentDay.value = dayjs(currentDay.value)
@@ -518,6 +415,7 @@ const handleMonthClick = (item: any) => {
 
 // 点击日期
 const handleDayClick = (item: any) => {
+  unWatch.value = true
   currentDay.value = item.value;
   if (item.type !== "current") {
     currentMonth.value =
@@ -527,6 +425,7 @@ const handleDayClick = (item: any) => {
 
 // 点击时间 - hms
 const choseTime = (e: any) => {
+  unWatch.value = true
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
     hms.value[type as keyof typeof hms.value] = value;