♻️(component): 优化datePicker细节

package/component/src/component/datePicker/components/DatePanel.vue

@@ -11,33 +11,7 @@
         <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">
+      <DateContent :date-list="datePicker.dateList" v-model="datePicker.currentDay.value"></DateContent>
-        <table>
-          <thead>
-            <tr>
-              <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-for="(o, i) of datePicker.dateList.value.length % 7 == 0
-            ? datePicker.dateList.value.length / 7
-            : Math.floor(datePicker.dateList.value.length / 7) + 1" :key="i">
-              <tr>
-                <td v-for="(item, index) of datePicker.dateList.value.slice(
-                  i * 7,
-                  i * 7 + 7
-                )" :key="index" :data-unix="item.value" :class="{
-  'laydate-day-prev': item.type !== 'current',
-  'layui-this': item.value === datePicker.currentDay.value || (range && (item.value == parseInt(rangeValue.first) || item.value == parseInt(rangeValue.last))),
-  'laydate-range-hover': ifHasRangeHoverClass(item),
-}" @click="handleDayClick(item)" @mouseenter="dayItemMouseEnter($event, item)">
-                  {{ item.day }}
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
       <PanelFoot></PanelFoot>
     </div>
   </div>
@@ -52,23 +26,9 @@ import { computed, inject, ref, watch } from 'vue';
 import { provideType } from '../interface';
 import { setDateList } from '../day';
 import PanelFoot from './PanelFoot.vue'
-
+import DateContent from './components/DateContent.vue'
-export interface Props {
-  range?: boolean,
-  rangeValue?: { first: string, last: string, hover: string }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  range: false,
-  rangeValue: () => { return { first: '', last: '', hover: '' } }
-});
 
 const datePicker: provideType = inject('datePicker') as provideType;
-const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
-
-
-
-
 
 // 监听年月, 刷新日期
 watch(
@@ -96,65 +56,5 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
   }
 };
 
-// 点击日期
-const handleDayClick = (item: any) => {
-  if (props.range) {
-    if (item.type !== "current") {
-      return;
-    }
-  }
-  datePicker.currentDay.value = item.value;
-
-  if (item.type !== "current") {
-    datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
-  }
-
-  if (props.range) {
-    if (props.rangeValue.first === '' && props.rangeValue.last === '') {
-      //props.rangeValue.first = item.value
-    } else if (props.rangeValue.first !== '' && props.rangeValue.last !== '') {
-      // rangeValue.first = item.value
-      // rangeValue.last = ''
-    } else if (props.rangeValue.first !== '' && props.rangeValue.last === '') {
-      //rangeValue.last = item.value
-    }
-  }
-};
-
-const dayItemMouseEnter = (event: MouseEvent, item: any) => {
-  if (!props.range) {
-    return;
-  }
-  if (!props.rangeValue.first) {
-    return;
-  }
-  if (item.type !== 'current') {
-    return;
-  }
-  //rpropsangeValue.hover = (event.target as HTMLElement).dataset.unix as string
-}
-const ifHasRangeHoverClass = computed(() => {
-  return function (item: any) {
-    if (!props.range) {
-      return false
-    }
-    if (!props.rangeValue.first) {
-      return false
-    }
-    if (item.type !== 'current') {
-      return false
-    }
-    if (item.value == parseInt(props.rangeValue.first) || item.value == parseInt(props.rangeValue.last)) {
-      return true;
-    }
-    let hover = props.rangeValue.last ? props.rangeValue.last : props.rangeValue.hover;
-    let max = props.rangeValue.first > hover ? props.rangeValue.first : hover;
-    let min = props.rangeValue.first < hover ? props.rangeValue.first : hover
-    if (item.value >= parseInt(min) && item.value <= parseInt(max)) {
-      return true
-    }
-    return false
-  }
-})
 
 </script>

package/component/src/component/datePicker/components/PanelFoot.vue

@@ -12,11 +12,19 @@
       @click="datePicker.showPanel.value = 'year'" class="laydate-btns-time">选择年份</span>
 
     <span v-else-if="!datePicker.range" class="layui-laydate-preview" title="当前选中的结果">
-      <template v-if="datePicker.type === 'month'">{{ datePicker.currentMonth.value + 1 }}</template>
+      <template v-if="datePicker.type === 'month' && datePicker.currentMonth.value != -1">
-      <template v-else-if="datePicker.type === 'year'">{{ datePicker.currentYear.value }}</template>
+        {{ datePicker.currentMonth.value + 1 }}
-      <template v-else-if="datePicker.type === 'time'">{{
+      </template>
-          datePicker.hms.value.hh + ':' + datePicker.hms.value.mm + ':' + (datePicker.hms.value.ss === 0 ? '0' : '') + datePicker.hms.value.ss
+      <template v-else-if="datePicker.type === 'year' && datePicker.currentYear.value != -1">
-      }}</template>
+        {{ datePicker.currentYear.value }}
+      </template>
+      <template v-else-if="datePicker.type === 'time'">
+        {{
+            (datePicker.hms.value.hh < 10 ? '0' : '') + datePicker.hms.value.hh +':'+
+            (datePicker.hms.value.mm < 10 ? '0' : '') + datePicker.hms.value.mm +':'+
+            (datePicker.hms.value.ss < 10 ? '0' : '') + datePicker.hms.value.ss
+        }}
+      </template>
     </span>
 
     <div class="laydate-footer-btns">

package/component/src/component/datePicker/components/TimePanel.vue

@@ -33,7 +33,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject } from 'vue';
+import { inject, onMounted, ref, nextTick, watch } from 'vue';
 import { provideType } from '../interface';
 import PanelFoot from './PanelFoot.vue'
 const datePicker: provideType = inject('datePicker') as provideType;
@@ -45,9 +45,44 @@ const els = [
 
 // 点击时间 - hms
 const choseTime = (e: any) => {
+  unWatch.value = true;
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
     datePicker.hms.value[type as keyof typeof datePicker.hms.value] = value;
   }
+  setTimeout(() => {
+    unWatch.value = false;
+  }, 0);
 };
+const unWatch = ref(false)
+const timePanelRef = ref()
+onMounted(() => {
+  scrollTo();
+})
+watch([datePicker.hms], () => {
+  if (!unWatch.value)
+    scrollTo();
+}, { deep: true })
+const scrollTo = () => {
+  nextTick(() => {
+    timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
+      if (element.nodeName === "LI") {
+        let scrollTop = 0;
+        let parentDom = element.firstElementChild as HTMLElement;
+        let childList = parentDom.childNodes;
+        for (let index = 0; index < childList.length; index++) {
+          const child = childList[index] as HTMLElement;
+          if (child.nodeName !== "LI") {
+            continue;
+          }
+          if (child.classList && child.classList.contains("layui-this")) {
+            scrollTop = child.offsetTop - (parentDom.offsetHeight - child.offsetHeight) / 2;
+            parentDom.scrollTo(0, scrollTop);
+            break;
+          }
+        }
+      }
+    });
+  })
+}
 </script>

package/component/src/component/datePicker/components/YearPanel.vue

@@ -7,10 +7,11 @@
         </div>
       </div>
     </div>
-    <div class="layui-laydate-content" style="height: 220px; overflow-y: auto" ref="yearmonthScrollRef">
+    <div class="layui-laydate-content" style="height: 220px; overflow-y: auto" ref="ScrollRef">
       <ul class="layui-laydate-list laydate-year-list">
         <li v-for="item of datePicker.yearList.value" :key="item"
-          :class="{ 'layui-this': datePicker.currentYear.value === item }" @click="handleYearClick(item)">{{ item }}</li>
+          :class="{ 'layui-this': datePicker.currentYear.value === item }" @click="handleYearClick(item)">{{ item }}
+        </li>
       </ul>
     </div>
     <PanelFoot></PanelFoot>
@@ -23,13 +24,14 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from 'dayjs';
-import { inject } from 'vue';
+import { inject, nextTick, onMounted, ref, watch } from 'vue';
 import { provideType } from '../interface';
 import PanelFoot from './PanelFoot.vue'
 const datePicker: provideType = inject('datePicker') as provideType;
-
+const unWatch = ref(false)
 // 点击年份
 const handleYearClick = (item: any) => {
+  unWatch.value = true;
   datePicker.currentYear.value = item;
   if (datePicker.type === "year") {
     datePicker.currentDay.value = dayjs().year(item).valueOf();
@@ -39,5 +41,29 @@ const handleYearClick = (item: any) => {
   } else {
     datePicker.showPanel.value = "date";
   }
+  setTimeout(() => {
+    unWatch.value = false;
+  }, 0);
 };
+
+const ScrollRef = ref();
+onMounted(() => {
+  scrollTo();
+})
+watch([datePicker.currentYear], () => {
+  if (!unWatch.value)
+    scrollTo();
+})
+const scrollTo = () => {
+  nextTick(() => {
+    let scrollTop = 0;
+    for (const child of ScrollRef.value.firstElementChild.childNodes) {
+      if (child.classList && child.classList.contains('layui-this')) {
+        scrollTop = child.offsetTop - (ScrollRef.value.offsetHeight - child.offsetHeight) / 2;
+        break;
+      }
+    }
+    ScrollRef.value.scrollTo(0, scrollTop)
+  })
+}
 </script>

package/component/src/component/datePicker/components/components/DateContent.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="layui-laydate-content">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="(o, i) of dateList.value.length % 7 == 0
+        ? dateList.value.length / 7
+        : Math.floor(dateList.value.length / 7) + 1" :key="i">
+          <tr>
+            <td v-for="(item, index) of dateList.value.slice(
+              i * 7,
+              i * 7 + 7
+            )" :key="index" :data-unix="item.value" :class="{
+  'laydate-day-prev': item.type !== 'current',
+  'layui-this': item.value === modelValue || (datePicker.range && (item.value == parseInt(datePicker.rangeValue.value.first) || item.value == parseInt(datePicker.rangeValue.value.last))),
+  'laydate-range-hover': ifHasRangeHoverClass(item),
+}" @click="handleDayClick(item)" @mouseenter="dayItemMouseEnter($event, item)">
+              {{ item.day }}
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: "DateContent",
+};
+</script>
+<script lang="ts" setup>import { computed, inject, ref, Ref } from 'vue';
+import { provideType } from '../../interface';
+
+export interface LayDatePickerProps {
+  dateList: any,
+  modelValue: number
+}
+
+const props = withDefaults(defineProps<LayDatePickerProps>(), {
+  dateList: [],
+  modelValue:-1,
+});
+const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
+const datePicker: provideType = inject('datePicker') as provideType;
+const emits = defineEmits(['update:modelValue']);
+
+// 点击日期
+const handleDayClick = (item: any) => {
+  if (datePicker.range) {
+    if (item.type !== "current") {
+      return;
+    }
+  }
+  emits('update:modelValue',item.value);
+
+  if (item.type !== "current") {
+    datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
+  }
+
+  if (datePicker.range) {
+    if (datePicker.rangeValue.value.first === '' && datePicker.rangeValue.value.last === '') {
+      //props.rangeValue.first = item.value
+    } else if (datePicker.rangeValue.value.first !== '' && datePicker.rangeValue.value.last !== '') {
+      // rangeValue.first = item.value
+      // rangeValue.last = ''
+    } else if (datePicker.rangeValue.value.first !== '' && datePicker.rangeValue.value.last === '') {
+      //rangeValue.last = item.value
+    }
+  }
+};
+
+const dayItemMouseEnter = (event: MouseEvent, item: any) => {
+  if (!datePicker.range) {
+    return;
+  }
+  if (!datePicker.rangeValue.value.first) {
+    return;
+  }
+  if (item.type !== 'current') {
+    return;
+  }
+  //rpropsangeValue.hover = (event.target as HTMLElement).dataset.unix as string
+}
+const ifHasRangeHoverClass = computed(() => {
+  return function (item: any) {
+    if (!datePicker.range) {
+      return false
+    }
+    if (!datePicker.rangeValue.value.first) {
+      return false
+    }
+    if (item.type !== 'current') {
+      return false
+    }
+    if (item.value == parseInt(datePicker.rangeValue.value.first) || item.value == parseInt(datePicker.rangeValue.value.last)) {
+      return true;
+    }
+    let hover = datePicker.rangeValue.value.last ? datePicker.rangeValue.value.last : datePicker.rangeValue.value.hover;
+    let max = datePicker.rangeValue.value.first > hover ? datePicker.rangeValue.value.first : hover;
+    let min = datePicker.rangeValue.value.first < hover ? datePicker.rangeValue.value.first : hover
+    if (item.value >= parseInt(min) && item.value <= parseInt(max)) {
+      return true
+    }
+    return false
+  }
+})
+</script>

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

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef" :disabled="disabled" @open="openDropDown">
+    <lay-dropdown ref="dropdownRef" :disabled="disabled">
       <lay-input readonly :name="name" :model-value="dateValue" :placeholder="placeholder" prefix-icon="layui-icon-date"
         :disabled="disabled">
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')">
+        <DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"></DatePanel>
-        </DatePanel>
         <!-- 时间选择 -->
         <TimePanel v-if="!range && showPanel === 'time'"></TimePanel>
         <!-- 年份选择器 -->
@@ -61,8 +60,6 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
 const dropdownRef = ref(null);
 const $emits = defineEmits(["update:modelValue"]);
 
-
-
 const hms = ref({
   hh: dayjs(props.modelValue).hour(),
   mm: dayjs(props.modelValue).minute(),
@@ -72,13 +69,14 @@ const hms = ref({
 const currentYear = ref(getYear(props.modelValue));
 const currentMonth = ref(getMonth(props.modelValue));
 const currentDay = ref<number>(getDay(props.modelValue));
-
 const yearList = ref<number[]>(getYears());
 const dateList = ref<any[]>([]);
 const dateListNext = ref<any[]>([]);
 const showPanel = ref("date");
-
+//范围选择
-const yearmonthScrollRef = ref()
+const rangeValue = reactive({
+  first: '', last: '', hover: ''
+})
 
 watch(
   () => props.type,
@@ -114,6 +112,7 @@ const dateValue = ref('')
 const getDateValue = (checkCurrentDay = true) => {
   if (checkCurrentDay) {
     if (currentDay.value === -1) {
+      dateValue.value = "";
       $emits("update:modelValue", "");
       return "";
     }
@@ -158,23 +157,46 @@ const getDateValue = (checkCurrentDay = true) => {
 
 // 确认事件
 const ok = () => {
+  if (props.type === 'time') {
     getDateValue(false)
+  } else {
+    getDateValue()
+  }
   if (dropdownRef.value)
     // @ts-ignore
     dropdownRef.value.hide();
+  if (props.type === 'yearmonth') {
+    showPanel.value = 'year';
+  } else if (props.type === 'datetime') {
+    showPanel.value = 'datetime';
+  }
 };
 
 // 现在时间
 const now = () => {
-  currentDay.value = dayjs().valueOf();
+  currentDay.value = new Date(new Date().toDateString()).getTime();
+  currentYear.value = dayjs().year();
+  currentMonth.value = dayjs().month();
   hms.value.hh = dayjs().hour();
   hms.value.mm = dayjs().minute();
   hms.value.ss = dayjs().second();
+  if (props.simple)
+    getDateValue(true)
 };
 
 // 清空日期
 const clear = () => {
   currentDay.value = -1;
+  if (showPanel.value === 'year')
+    currentYear.value = -1;
+  if (showPanel.value === 'month')
+    currentMonth.value = -1;
+  if (showPanel.value === 'time') {
+    hms.value.hh = 0
+    hms.value.mm = 0
+    hms.value.ss = 0
+  }
+  getDateValue(true)
 };
 
 //simple
@@ -211,90 +233,7 @@ provide('datePicker', {
   now: () => now(),
   ok: () => ok(),
   getDateValue: () => getDateValue,
-  range: props.range
+  range: props.range,
+  rangeValue: rangeValue
 });
-
-const openDropDown = () => {
-  nextTick(() => {
-    // if (showPanel.value == 'year' || showPanel.value == 'yearmonth') {
-    //   let scrollTop = 0;
-    //   for (const child of yearmonthScrollRef.value.firstElementChild.childNodes) {
-    //     if (child.classList && child.classList.contains('layui-this')) {
-    //       scrollTop = child.offsetTop - (yearmonthScrollRef.value.offsetHeight - child.offsetHeight) / 2;
-    //       break;
-    //     }
-    //   }
-    //   yearmonthScrollRef.value.scrollTo(0, scrollTop)
-    // } else if (showPanel.value == 'time') {
-    //   scrollToCurrentTime()
-    // }
-  })
-}
-
-//时间定位
-const timePanelRef = ref()
-const scrollToCurrentTime = () => {
-  nextTick(() => {
-    timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
-      if (element.nodeName === "LI") {
-        let scrollTop = 0;
-        let parentDom = element.firstElementChild as HTMLElement;
-        let childList = parentDom.childNodes;
-        for (let index = 0; index < childList.length; index++) {
-          const child = childList[index] as HTMLElement;
-          if (child.nodeName !== "LI") {
-            continue;
-          }
-          if (child.classList && child.classList.contains("layui-this")) {
-            scrollTop =
-              child.offsetTop -
-              (parentDom.offsetHeight - child.offsetHeight) / 2;
-            parentDom.scrollTo(0, scrollTop);
-            break;
-          }
-        }
-      }
-    });
-  })
-}
-
-//范围选择
-const rangeValue = reactive({
-  first: '', last: '', hover: ''
-})
-const dayItemMouseEnter = (event: MouseEvent, item: any) => {
-  if (!props.range) {
-    return;
-  }
-  if (!rangeValue.first) {
-    return;
-  }
-  if (item.type !== 'current') {
-    return;
-  }
-  rangeValue.hover = (event.target as HTMLElement).dataset.unix as string
-}
-const ifHasRangeHoverClass = computed(() => {
-  return function (item: any) {
-    if (!props.range) {
-      return false
-    }
-    if (!rangeValue.first) {
-      return false
-    }
-    if (item.type !== 'current') {
-      return false
-    }
-    if (item.value == parseInt(rangeValue.first) || item.value == parseInt(rangeValue.last)) {
-      return true;
-    }
-    let hover = rangeValue.last ? rangeValue.last : rangeValue.hover;
-    let max = rangeValue.first > hover ? rangeValue.first : hover;
-    let min = rangeValue.first < hover ? rangeValue.first : hover
-    if (item.value >= parseInt(min) && item.value <= parseInt(max)) {
-      return true
-    }
-    return false
-  }
-})
 </script>

package/component/src/component/datePicker/interface.ts

@@ -16,4 +16,5 @@ export type provideType={
   now:Function,
   ok:Function,
   range:boolean,
+  rangeValue:Ref
 }