perf(date-picker): 代码优化

src/component/datePicker/day.ts

@@ -0,0 +1,36 @@
+/**
+ * 获取年份列表
+ */
+const getYears = () => {
+    let years = [];
+    for (let i = 1970; i < getYear() + 100; i++) {
+        years.push(i);
+    }
+    return years;
+}
+
+/**
+ * 获取当前日期 
+ */
+const getDate = () => {
+    return new Date();
+}
+
+/**
+ * 获取当前年份 
+ */
+const getYear = () => {
+    return getDate().getFullYear();
+}
+
+/**
+ * 获取月份天数
+ * 
+ * @param year
+ * @param month
+ */
+const getDayLength = (year: number, month: number): number => {
+    return new Date(year, month + 1, 0).getDate();
+};
+
+export { getDayLength, getYears }

src/component/datePicker/index.vue

@@ -17,8 +17,8 @@
                 ></i
               >
               <div class="laydate-set-ym">
-                <span @click="showYearPanel">{{ curYear }} 年</span
+                <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'">{{ curMonth + 1 }} 月</span>
+                ><span @click="showPanel = 'month'">{{ currentMonth + 1 }} 月</span>
               </div>
               <i
                 class="layui-icon laydate-icon laydate-next-m"
@@ -100,9 +100,9 @@
                 <li
                   v-for="item of yearList"
                   :key="item"
-                  :class="[{ 'layui-this': curYear === item }]"
+                  :class="[{ 'layui-this': currentYear === item }]"
                   @click="
-                    curYear = item;
+                    currentYear = item;
                     showPanel = 'date';
                   "
                 >
@@ -136,8 +136,8 @@
                 ></i
               >
               <div class="laydate-set-ym">
-                <span @click="showYearPanel">{{ curYear }} 年</span
+                <span @click="showYearPanel">{{ currentYear }} 年</span
-                ><span @click="showPanel = 'month'">{{ curMonth + 1 }} 月</span>
+                ><span @click="showPanel = 'month'">{{ currentMonth + 1 }} 月</span>
               </div>
               <i
                 class="layui-icon laydate-icon laydate-next-y"
@@ -151,10 +151,10 @@
                   v-for="item of MONTH_NAME"
                   :key="item"
                   :class="[
-                    { 'layui-this': MONTH_NAME.indexOf(item) === curMonth },
+                    { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
                   ]"
                   @click="
-                    curMonth = MONTH_NAME.indexOf(item);
+                    currentMonth = MONTH_NAME.indexOf(item);
                     showPanel = 'date';
                   "
                 >
@@ -178,7 +178,7 @@
           </div>
         </div>
 
-        <!-- 事件选择器 -->
+        <!-- 时间选择器 -->
         <div class="layui-laydate" v-if="showPanel == 'time'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
             <div class="layui-laydate-header">
@@ -190,10 +190,10 @@
               <ul class="layui-laydate-list laydate-time-list">
                 <li
                   class="num-list"
-                  v-for="item in hms.insertEls"
+                  v-for="item in els"
                   :key="item.type"
                 >
-                  <ol class="scroll" @click="chooseTime">
+                  <ol class="scroll" @click="choseTime">
                     <li
                       v-for="(it, index) in item.count"
                       :id="item.type + index.toString()"
@@ -231,9 +231,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
+import { computed, nextTick, ref, watch, defineProps, defineEmits, onMounted } from "vue";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
+import { getDayLength, getYears } from "./day";
+
+const $emits = defineEmits(["update:modelValue"]);
+
+const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
+const MONTH_NAME = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
+const hms = ref({hh: "00",mm: "00",ss: "00"});
+const els = [
+  {count: 24, type: "hh"},
+  {count: 60, type: "mm"},
+  {count: 60, type: "ss"},
+];
 
 export interface LayDatePickerProps {
   modelValue?: string;
@@ -245,51 +257,16 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   type: "date",
 });
 
-const $emits = defineEmits(["update:modelValue"]);
 const currentDate = new Date();
-const yearList = ref<number[]>([]);
+const currentYear = ref(currentDate.getFullYear());
+const currentMonth = ref(currentDate.getMonth());
+
+const yearList = ref<number[]>(getYears());
 const dateList = ref<any[]>([]);
-const curYear = ref(currentDate.getFullYear());
-const curMonth = ref(currentDate.getMonth());
 const showPanel = ref("date");
 const selectedDay = ref<number>();
 
-const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
+// 最终结果
-const MONTH_NAME = [
-  "1月",
-  "2月",
-  "3月",
-  "4月",
-  "5月",
-  "6月",
-  "7月",
-  "8月",
-  "9月",
-  "10月",
-  "11月",
-  "12月",
-];
-
-const hms = ref({
-  hh: "00",
-  mm: "00",
-  ss: "00",
-  insertEls: [
-    {
-      count: 24,
-      type: "hh",
-    },
-    {
-      count: 60,
-      type: "mm",
-    },
-    {
-      count: 60,
-      type: "ss",
-    },
-  ],
-});
-
 const dateValue = computed<string>(() => {
   if (!selectedDay.value) return "";
   const d = new Date(selectedDay.value);
@@ -301,18 +278,6 @@ const dateValue = computed<string>(() => {
   return currentValue;
 });
 
-// 生成近100年的年份列表
-(() => {
-  for (let i = 1970; i < curYear.value + 100; i++) {
-    yearList.value.push(i);
-  }
-})();
-
-// 获取传入的月份有多少天
-const getDayLength = (year: number, month: number): number => {
-  return new Date(year, month + 1, 0).getDate();
-};
-
 // 设置日期列表
 const setDateList = (year: number, month: number) => {
   const curDays = getDayLength(year, month); // 当月天数
@@ -345,7 +310,7 @@ const setDateList = (year: number, month: number) => {
     for (let i = 1; i <= nextDays; i++) {
       list.push({
         day: i,
-        value: +new Date(year, month + 1, i),
+        value: + new Date(year, month + 1, i),
         isRange: false,
         isSelected: false,
         type: "next",
@@ -355,10 +320,11 @@ const setDateList = (year: number, month: number) => {
   dateList.value = list;
 };
 
+// 监听年月, 刷新日期
 watch(
-  [curYear, curMonth],
+  [currentYear, currentMonth],
   () => {
-    setDateList(curYear.value, curMonth.value);
+    setDateList(currentYear.value, currentMonth.value);
   },
   { immediate: true }
 );
@@ -367,8 +333,7 @@ watch(
 const handleDayClick = (item: any) => {
   selectedDay.value = item.value;
   if (item.type !== "current") {
-    curMonth.value =
+    currentMonth.value = item.type === "prev" ? currentMonth.value - 1 : currentMonth.value + 1;
-      item.type === "prev" ? curMonth.value - 1 : curMonth.value + 1;
   }
 };
 
@@ -378,18 +343,17 @@ const ok = () => {};
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
   if (type === "year") {
-    curYear.value += num;
+    currentYear.value += num;
   } else {
-    let month = curMonth.value + num;
+    let month = currentMonth.value + num;
-
     if (month > 11) {
       month = 0;
-      curYear.value++;
+      currentYear.value++;
     } else if (month < 0) {
       month = 11;
-      curYear.value--;
+      currentYear.value--;
     }
-    curMonth.value = month;
+    currentMonth.value = month;
   }
 };
 
@@ -397,29 +361,12 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
 const showYearPanel = () => {
   showPanel.value = "year";
   nextTick(() => {
-    (
+    (document.querySelector(".year-panel-item.active") as HTMLElement).scrollIntoView({ block: "center" });
-      document.querySelector(".year-panel-item.active") as HTMLElement
-    ).scrollIntoView({ block: "center" });
   });
 };
 
-const showHmPanel = ref(false);
+// 点击时间 - hms
-
+const choseTime = (e: any) => {
-const openHmPanel = () => {
-  let activeEl = document.querySelectorAll(".hms-change .isactive") as any;
-  let count = 0;
-  const initScrollIntoView = () => {
-    if (count > activeEl.length) return;
-    activeEl[count].scrollIntoView({ behavior: "smooth" });
-    count++;
-    setTimeout(initScrollIntoView, Number(activeEl[count].dataset.value) * 16);
-  };
-
-  initScrollIntoView();
-  showHmPanel.value = !showHmPanel.value;
-};
-
-const chooseTime = (e: any) => {
   if (e.target.nodeName == "LI") {
     let { value, type } = e.target.dataset;
     hms.value[type as keyof typeof hms.value] = value;