📝(component): 更新文档

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

@@ -31,9 +31,18 @@
           ></i
         >
       </div>
-      <DateContent :date-list="dateList" v-model="Day" @simple="footOnOk"></DateContent>
+      <DateContent
+        :date-list="dateList"
+        v-model="Day"
+        @simple="footOnOk"
+      ></DateContent>
       <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-        <span v-if="datePicker.type === 'datetime'" @click="datePicker.showPanel.value='time'" class="laydate-btns-time">选择时间</span>
+        <span
+          v-if="datePicker.type === 'datetime'"
+          @click="datePicker.showPanel.value = 'time'"
+          class="laydate-btns-time"
+          >选择时间</span
+        >
       </PanelFoot>
     </div>
   </div>
@@ -44,34 +53,40 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject, ref, watch } from 'vue';
+import { inject, ref, watch } from "vue";
-import { provideType } from '../interface';
+import { provideType } from "../interface";
-import { setDateList } from '../day';
+import { setDateList } from "../day";
-import PanelFoot from './PanelFoot.vue'
+import PanelFoot from "./PanelFoot.vue";
-import DateContent from './components/DateContent.vue'
+import DateContent from "./components/DateContent.vue";
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
 
 export interface TimePanelProps {
   modelValue: number;
 }
 const props = withDefaults(defineProps<TimePanelProps>(), {});
-const emits = defineEmits(['update:modelValue', 'ok']);
+const emits = defineEmits(["update:modelValue", "ok"]);
-const Day = ref(props.modelValue)
+const Day = ref(props.modelValue);
-const datePicker: provideType = inject('datePicker') as provideType;
+const datePicker: provideType = inject("datePicker") as provideType;
 const dateList = ref<any>([]);
 
 // 监听年月, 刷新日期
 watch(
   [datePicker.currentYear, datePicker.currentMonth],
   () => {
-    dateList.value = setDateList(datePicker.currentYear.value, datePicker.currentMonth.value);
+    dateList.value = setDateList(
+      datePicker.currentYear.value,
+      datePicker.currentMonth.value
+    );
   },
   { immediate: true }
 );
 
-watch(() => props.modelValue, () => {
+watch(
-  Day.value = props.modelValue;
+  () => props.modelValue,
-})
+  () => {
+    Day.value = props.modelValue;
+  }
+);
 
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
@@ -92,19 +107,19 @@ const changeYearOrMonth = (type: "year" | "month", num: number) => {
 
 //关闭回调
 const footOnOk = () => {
-  emits('update:modelValue', Day.value)
+  emits("update:modelValue", Day.value);
-  datePicker.ok()
+  datePicker.ok();
-}
+};
 
 //现在回调
 const footOnNow = () => {
-  datePicker.currentYear.value=dayjs().year();
+  datePicker.currentYear.value = dayjs().year();
-  datePicker.currentMonth.value=dayjs().month();
+  datePicker.currentMonth.value = dayjs().month();
   Day.value = new Date(new Date().toDateString()).getTime();
-}
+};
 
 //清空回调
 const footOnClear = () => {
-  Day.value = -1
+  Day.value = -1;
-}
+};
 </script>

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

@@ -1,36 +1,75 @@
 <template>
-  <div class="layui-laydate layui-laydate-range" :class="'layui-laydate-range-' + datePicker.showPanel.value">
+  <div
-    <div style="display:flex">
+    class="layui-laydate layui-laydate-range"
+    :class="'layui-laydate-range-' + datePicker.showPanel.value"
+  >
+    <div style="display: flex">
       <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">
             <lay-dropdown ref="dropdownYearPanelRefLeft">
-              <span class="laydate-range-time">{{ startTime.year || '--' }}年</span>
+              <span class="laydate-range-time"
+                >{{ startTime.year || "--" }}年</span
+              >
               <template #content>
-                <YearPanel class="time-panel" v-model="startTime.year" @ok="closeTimePanel"></YearPanel>
+                <YearPanel
+                  class="time-panel"
+                  v-model="startTime.year"
+                  @ok="closeTimePanel"
+                ></YearPanel>
               </template>
             </lay-dropdown>
             <lay-dropdown ref="dropdownMonthPanelRefLeft">
-              <span class="laydate-range-time">{{ startTime.month + 1 }}月</span>
+              <span class="laydate-range-time"
+                >{{ startTime.month + 1 }}月</span
+              >
               <template #content>
-                <MonthPanel class="time-panel" v-model="startTime.month" @ok="closeTimePanel"></MonthPanel>
+                <MonthPanel
+                  class="time-panel"
+                  v-model="startTime.month"
+                  @ok="closeTimePanel"
+                ></MonthPanel>
               </template>
             </lay-dropdown>
-            <lay-dropdown ref="dropdownTimePanelRefLeft" v-if="datePicker.type === 'datetime'">
+            <lay-dropdown
+              ref="dropdownTimePanelRefLeft"
+              v-if="datePicker.type === 'datetime'"
+            >
               <span class="laydate-range-time">
-                {{ dayjs().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format('HH:mm:ss')
+                {{
+                  dayjs()
+                    .hour(startTime.hms.hh)
+                    .minute(startTime.hms.mm)
+                    .second(startTime.hms.ss)
+                    .format("HH:mm:ss")
                 }}
               </span>
               <template #content>
-                <TimePanel v-model="startTime.hms" class="time-panel" @ok="closeTimePanel"></TimePanel>
+                <TimePanel
+                  v-model="startTime.hms"
+                  class="time-panel"
+                  @ok="closeTimePanel"
+                ></TimePanel>
               </template>
             </lay-dropdown>
           </div>
         </div>
-        <DateContent :date-list="prevDateList" v-model:hoverDate="hoverDate" v-model:startDate="startTime.day"
+        <DateContent
-          v-model:endDate="endTime.day"></DateContent>
+          :date-list="prevDateList"
+          v-model:hoverDate="hoverDate"
+          v-model:startDate="startTime.day"
+          v-model:endDate="endTime.day"
+        ></DateContent>
       </div>
       <div class="layui-laydate-main laydate-main-list-0">
         <div class="layui-laydate-header">
@@ -38,47 +77,92 @@
             <lay-dropdown ref="dropdownYearPanelRefRight">
               <span class="laydate-range-time">{{ startTime.year }}年</span>
               <template #content>
-                <YearPanel class="time-panel" v-model="endTime.year" @ok="closeRightYearPanel"></YearPanel>
+                <YearPanel
+                  class="time-panel"
+                  v-model="endTime.year"
+                  @ok="closeRightYearPanel"
+                ></YearPanel>
               </template>
             </lay-dropdown>
             <lay-dropdown ref="dropdownMonthPanelRefRight">
-              <span class="laydate-range-time">{{ startTime.month + 2 }}月</span>
+              <span class="laydate-range-time"
+                >{{ startTime.month + 2 }}月</span
+              >
               <template #content>
-                <MonthPanel class="time-panel" v-model="endTime.month" @ok="closeRightMonthPanel"></MonthPanel>
+                <MonthPanel
+                  class="time-panel"
+                  v-model="endTime.month"
+                  @ok="closeRightMonthPanel"
+                ></MonthPanel>
               </template>
             </lay-dropdown>
-            <lay-dropdown ref="dropdownTimePanelRefRight" v-if="datePicker.type === 'datetime'">
+            <lay-dropdown
+              ref="dropdownTimePanelRefRight"
+              v-if="datePicker.type === 'datetime'"
+            >
               <span class="laydate-range-time">
-                {{ dayjs().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format('HH:mm:ss') }}
+                {{
+                  dayjs()
+                    .hour(endTime.hms.hh)
+                    .minute(endTime.hms.mm)
+                    .second(endTime.hms.ss)
+                    .format("HH:mm:ss")
+                }}
               </span>
               <template #content>
-                <TimePanel v-model="endTime.hms" class="time-panel" @ok="closeTimePanel"></TimePanel>
+                <TimePanel
+                  v-model="endTime.hms"
+                  class="time-panel"
+                  @ok="closeTimePanel"
+                ></TimePanel>
               </template>
             </lay-dropdown>
           </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>
-        <DateContent :date-list="nextDateList" v-model:hoverDate="hoverDate" v-model:startDate="startTime.day"
+        <DateContent
-          v-model:endDate="endTime.day"></DateContent>
+          :date-list="nextDateList"
+          v-model:hoverDate="hoverDate"
+          v-model:startDate="startTime.day"
+          v-model:endDate="endTime.day"
+        ></DateContent>
       </div>
     </div>
     <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
       <span v-if="startTime.day !== -1" class="layui-laydate-preview">
-        {{ dayjs(startTime.day).format('YYYY-MM-DD') }}
+        {{ dayjs(startTime.day).format("YYYY-MM-DD") }}
         <template v-if="datePicker.type === 'datetime'">
-          {{ dayjs().hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format('HH:mm:ss') }}
+          {{
+            dayjs()
+              .hour(startTime.hms.hh)
+              .minute(startTime.hms.mm)
+              .second(startTime.hms.ss)
+              .format("HH:mm:ss")
+          }}
         </template>
         {{ datePicker.rangeSeparator }}
         <template v-if="endTime.day !== -1">
-          {{ dayjs(endTime.day).format('YYYY-MM-DD') }}
+          {{ dayjs(endTime.day).format("YYYY-MM-DD") }}
           <template v-if="datePicker.type === 'datetime'">
-            {{ dayjs().hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format('HH:mm:ss') }}
+            {{
+              dayjs()
+                .hour(endTime.hms.hh)
+                .minute(endTime.hms.mm)
+                .second(endTime.hms.ss)
+                .format("HH:mm:ss")
+            }}
           </template>
         </template>
-        <template v-else>
+        <template v-else> -- </template>
-          --
-        </template>
       </span>
     </PanelFoot>
   </div>
@@ -89,46 +173,50 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject, reactive, ref, watch } from 'vue';
+import { inject, reactive, ref, watch } from "vue";
-import { provideType } from '../interface';
+import { provideType } from "../interface";
-import { setDateList } from '../day';
+import { setDateList } from "../day";
-import PanelFoot from './PanelFoot.vue'
+import PanelFoot from "./PanelFoot.vue";
-import DateContent from './components/DateContent.vue'
+import DateContent from "./components/DateContent.vue";
-import TimePanel from './TimePanel.vue';
+import TimePanel from "./TimePanel.vue";
-import YearPanel from './YearPanel.vue';
+import YearPanel from "./YearPanel.vue";
-import MonthPanel from './MonthPanel.vue';
+import MonthPanel from "./MonthPanel.vue";
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
 export interface DateRangeProps {
   startTime: string;
   endTime: string;
 }
 const props = withDefaults(defineProps<DateRangeProps>(), {});
-const emits = defineEmits(['update:modelValue', 'update:startTime', 'update:endTime']);
+const emits = defineEmits([
-const datePicker: provideType = inject('datePicker') as provideType;
+  "update:modelValue",
+  "update:startTime",
+  "update:endTime",
+]);
+const datePicker: provideType = inject("datePicker") as provideType;
 
 const prevDateList = ref<any>([]);
 const nextDateList = ref<any>([]);
 const startTime = reactive({
   year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
   month: props.startTime ? dayjs(props.startTime).month() : dayjs().month(),
-  day: props.startTime ? dayjs(props.startTime).startOf('day').valueOf() : -1,
+  day: props.startTime ? dayjs(props.startTime).startOf("day").valueOf() : -1,
   hms: {
     hh: props.startTime ? dayjs(props.startTime).hour() : 0,
     mm: props.startTime ? dayjs(props.startTime).minute() : 0,
     ss: props.startTime ? dayjs(props.startTime).second() : 0,
-  }
+  },
-})
+});
 const endTime = reactive({
   year: props.endTime ? dayjs(props.endTime).year() : dayjs().year(),
   month: props.endTime ? dayjs(props.endTime).month() : dayjs().month(),
-  day: props.endTime ? dayjs(props.endTime).startOf('day').valueOf() : -1,
+  day: props.endTime ? dayjs(props.endTime).startOf("day").valueOf() : -1,
   hms: {
     hh: props.endTime ? dayjs(props.endTime).hour() : 0,
     mm: props.endTime ? dayjs(props.endTime).minute() : 0,
     ss: props.endTime ? dayjs(props.endTime).second() : 0,
-  }
+  },
-})
+});
-const hoverDate = ref(-1)
+const hoverDate = ref(-1);
 
 // 切换年月
 const changeYearOrMonth = (type: "year" | "month", num: number) => {
@@ -157,8 +245,6 @@ watch(
   { immediate: true }
 );
 
-
-
 //关闭选择时间的面板
 const dropdownTimePanelRefLeft = ref();
 const dropdownTimePanelRefRight = ref();
@@ -167,23 +253,18 @@ const dropdownYearPanelRefRight = ref();
 const dropdownMonthPanelRefLeft = ref();
 const dropdownMonthPanelRefRight = ref();
 const closeTimePanel = () => {
-  if (dropdownTimePanelRefLeft.value)
+  if (dropdownTimePanelRefLeft.value) dropdownTimePanelRefLeft.value.hide();
-    dropdownTimePanelRefLeft.value.hide()
+  if (dropdownTimePanelRefRight.value) dropdownTimePanelRefRight.value.hide();
-  if (dropdownTimePanelRefRight.value)
+  if (dropdownYearPanelRefLeft.value) dropdownYearPanelRefLeft.value.hide();
-    dropdownTimePanelRefRight.value.hide()
+  if (dropdownMonthPanelRefLeft.value) dropdownMonthPanelRefLeft.value.hide();
-  if (dropdownYearPanelRefLeft.value)
+};
-    dropdownYearPanelRefLeft.value.hide()
-  if (dropdownMonthPanelRefLeft.value)
-    dropdownMonthPanelRefLeft.value.hide()
-}
 const closeRightYearPanel = () => {
-  if (dropdownYearPanelRefRight.value)
+  if (dropdownYearPanelRefRight.value) dropdownYearPanelRefRight.value.hide();
-    dropdownYearPanelRefRight.value.hide()
+  startTime.year = endTime.year;
-  startTime.year = endTime.year
+};
-}
 const closeRightMonthPanel = () => {
-  dropdownMonthPanelRefRight.value.hide()
+  dropdownMonthPanelRefRight.value.hide();
-  let month = endTime.month - 1
+  let month = endTime.month - 1;
   if (month > 11) {
     month = 0;
     startTime.year++;
@@ -192,25 +273,34 @@ const closeRightMonthPanel = () => {
     startTime.year--;
   }
   startTime.month = month;
-}
+};
 
 //关闭回调
 const footOnOk = () => {
-  let format = datePicker.type === 'datetime' ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  let format =
-  let startTimeVal = dayjs(startTime.day).hour(startTime.hms.hh).minute(startTime.hms.mm).second(startTime.hms.ss).format(format);
+    datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  let endTimeVal = dayjs(endTime.day).hour(endTime.hms.hh).minute(endTime.hms.mm).second(endTime.hms.ss).format(format);
+  let startTimeVal = dayjs(startTime.day)
-  emits('update:startTime', startTimeVal);
+    .hour(startTime.hms.hh)
-  emits('update:endTime', endTimeVal);
+    .minute(startTime.hms.mm)
-  datePicker.ok()
+    .second(startTime.hms.ss)
-}
+    .format(format);
+  let endTimeVal = dayjs(endTime.day)
+    .hour(endTime.hms.hh)
+    .minute(endTime.hms.mm)
+    .second(endTime.hms.ss)
+    .format(format);
+  emits("update:startTime", startTimeVal);
+  emits("update:endTime", endTimeVal);
+  datePicker.ok();
+};
 
 //现在回调
 const footOnNow = () => {
   //Month.value = dayjs().month();
-}
+};
 
 //清空回调
 const footOnClear = () => {
   //Month.value = ''
-}
+};
-</script>
+</script>

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

@@ -3,22 +3,31 @@
     <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
-          <span @click="datePicker.showPanel.value = 'month'">{{ typeof Month !== 'string' ? Month + 1 + ' 月' : '请选择月份'
+          <span @click="datePicker.showPanel.value = 'month'">{{
+            typeof Month !== "string" ? Month + 1 + " 月" : "请选择月份"
           }}</span>
         </div>
       </div>
     </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="{ 'layui-this': MONTH_NAME.indexOf(item) === Month }"
+        <li
-          @click="handleMonthClick(item)">
+          v-for="item of MONTH_NAME"
+          :key="item"
+          :class="{ 'layui-this': MONTH_NAME.indexOf(item) === Month }"
+          @click="handleMonthClick(item)"
+        >
           {{ item.slice(0, 3) }}
         </li>
       </ul>
     </div>
     <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'year'"
+      <span
-        class="laydate-btns-time">选择年份</span>
+        v-if="datePicker.type === 'yearmonth'"
+        @click="datePicker.showPanel.value = 'year'"
+        class="laydate-btns-time"
+        >选择年份</span
+      >
     </PanelFoot>
   </div>
 </template>
@@ -28,21 +37,21 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import { inject, ref, watch } from 'vue';
+import { inject, ref, watch } from "vue";
-import { provideType } from '../interface';
+import { provideType } from "../interface";
-import PanelFoot from './PanelFoot.vue'
+import PanelFoot from "./PanelFoot.vue";
 
 export interface TimePanelProps {
   modelValue: number | string;
   max?: number;
 }
 const props = withDefaults(defineProps<TimePanelProps>(), {
-  max: dayjs().year() + 100
+  max: dayjs().year() + 100,
 });
-const emits = defineEmits(['update:modelValue', 'ok']);
+const emits = defineEmits(["update:modelValue", "ok"]);
-const datePicker: provideType = inject('datePicker') as provideType;
+const datePicker: provideType = inject("datePicker") as provideType;
-const Month = ref(props.modelValue)
+const Month = ref(props.modelValue);
 
 const MONTH_NAME = [
   "1月",
@@ -64,10 +73,12 @@ const handleMonthClick = (item: any) => {
   Month.value = MONTH_NAME.indexOf(item);
   if (!datePicker.range) {
     if (datePicker.type === "yearmonth") {
-      datePicker.currentDay.value = dayjs(datePicker.currentDay.value).month(MONTH_NAME.indexOf(item)).valueOf();
+      datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
+        .month(MONTH_NAME.indexOf(item))
+        .valueOf();
     }
     if (datePicker.type === "date" || datePicker.type === "datetime") {
-      emits('update:modelValue', MONTH_NAME.indexOf(item))
+      emits("update:modelValue", MONTH_NAME.indexOf(item));
     }
   }
   if (datePicker.simple) {
@@ -75,29 +86,32 @@ const handleMonthClick = (item: any) => {
   }
 };
 
-watch(() => props.modelValue, () => {
+watch(
-  Month.value = props.modelValue;
+  () => props.modelValue,
-})
+  () => {
+    Month.value = props.modelValue;
+  }
+);
 
 //关闭回调
 const footOnOk = () => {
-  emits('update:modelValue', Month.value)
+  emits("update:modelValue", Month.value);
   if (datePicker.range) {
     //关闭菜单
-    emits('ok');
+    emits("ok");
     return;
   } else {
-    datePicker.ok()
+    datePicker.ok();
   }
-}
+};
 
 //现在回调
 const footOnNow = () => {
   Month.value = dayjs().month();
-}
+};
 
 //清空回调
 const footOnClear = () => {
-  Month.value = ''
+  Month.value = "";
-}
+};
 </script>

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

@@ -2,9 +2,15 @@
   <div class="layui-laydate-footer">
     <slot></slot>
     <div class="laydate-footer-btns">
-      <span lay-type="clear" class="laydate-btns-clear" @click="handelClear">清空</span>
+      <span lay-type="clear" class="laydate-btns-clear" @click="handelClear"
-      <span lay-type="now" class="laydate-btns-now" @click="handelNow">现在</span>
+        >清空</span
-      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk">确定</span>
+      >
+      <span lay-type="now" class="laydate-btns-now" @click="handelNow"
+        >现在</span
+      >
+      <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk"
+        >确定</span
+      >
     </div>
   </div>
 </template>
@@ -15,17 +21,17 @@ export default {
 </script>
 <script lang="ts" setup>
 //foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
-const emits = defineEmits(['ok', 'clear', 'now']);
+const emits = defineEmits(["ok", "clear", "now"]);
 
 const handelOk = () => {
-  emits('ok');
+  emits("ok");
-}
+};
 
 const handelNow = () => {
-  emits('now')
+  emits("now");
-}
+};
 
 const handelClear = () => {
-  emits('clear')
+  emits("clear");
-}
+};
 </script>

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

@@ -8,10 +8,20 @@
       </div>
       <div class="layui-laydate-content" style="height: 210px">
         <ul class="layui-laydate-list laydate-time-list" ref="timePanelRef">
-          <li class="num-list" v-for="item in els" :key="item.type" :data-type="item.type">
+          <li
+            class="num-list"
+            v-for="item in els"
+            :key="item.type"
+            :data-type="item.type"
+          >
             <ol class="scroll" @click="chooseTime">
-              <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 as hmsType)[item.type]
                     ? 'layui-this'
@@ -26,12 +36,16 @@
       </div>
     </div>
     <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span v-if="datePicker.type === 'datetime' && !datePicker.range" @click="datePicker.showPanel.value = 'datetime'"
+      <span
-        class="laydate-btns-time">选择日期</span>
+        v-if="datePicker.type === 'datetime' && !datePicker.range"
+        @click="datePicker.showPanel.value = 'datetime'"
+        class="laydate-btns-time"
+        >选择日期</span
+      >
       <template v-else>
-        {{ hms.hh > 9 ? hms.hh : '0' + hms.hh }}:{{ hms.mm > 9 ? hms.mm : '0' + hms.mm }}:{{ hms.ss > 9 ? hms.ss : '0' +
+        {{ hms.hh > 9 ? hms.hh : "0" + hms.hh }}:{{
-            hms.ss
+          hms.mm > 9 ? hms.mm : "0" + hms.mm
-        }}
+        }}:{{ hms.ss > 9 ? hms.ss : "0" + hms.ss }}
       </template>
     </PanelFoot>
   </div>
@@ -42,28 +56,28 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import { inject, onMounted, ref, Ref, nextTick, watch, h } from 'vue';
+import { inject, onMounted, ref, Ref, nextTick, watch, h } from "vue";
-import { provideType } from '../interface';
+import { provideType } from "../interface";
-import PanelFoot from './PanelFoot.vue'
+import PanelFoot from "./PanelFoot.vue";
 export interface hmsType {
-  hh: number; mm: number; ss: number;
+  hh: number;
+  mm: number;
+  ss: number;
 }
 export interface TimePanelProps {
-  modelValue: hmsType
+  modelValue: hmsType;
 }
 
-const props = withDefaults(defineProps<TimePanelProps>(), {
+const props = withDefaults(defineProps<TimePanelProps>(), {});
-
+const emits = defineEmits(["update:modelValue", "ok"]);
-});
+const datePicker: provideType = inject("datePicker") as provideType;
-const emits = defineEmits(['update:modelValue', 'ok']);
-const datePicker: provideType = inject('datePicker') as provideType;
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },
   { count: 60, type: "ss" },
 ];
-const hms = ref<{ hh: number; mm: number; ss: number; }>(props.modelValue);
+const hms = ref<{ hh: number; mm: number; ss: number }>(props.modelValue);
 
 // 点击时间 - hms
 const chooseTime = (e: any) => {
@@ -73,13 +87,17 @@ const chooseTime = (e: any) => {
   }
 };
 
-const timePanelRef = ref()
+const timePanelRef = ref();
 onMounted(() => {
   scrollTo();
-})
+});
-watch(() => props.modelValue, () => {
+watch(
-  hms.value = props.modelValue
+  () => props.modelValue,
-}, { deep: true })
+  () => {
+    hms.value = props.modelValue;
+  },
+  { deep: true }
+);
 const scrollTo = () => {
   nextTick(() => {
     timePanelRef.value.childNodes.forEach((element: HTMLElement) => {
@@ -102,27 +120,27 @@ const scrollTo = () => {
         }
       }
     });
-  })
+  });
-}
+};
 
 //确认关闭回调
 const footOnOk = () => {
-  emits('update:modelValue', hms)
+  emits("update:modelValue", hms);
   if (datePicker.range) {
     //关闭菜单
-    emits('ok');
+    emits("ok");
     return;
   } else {
-    datePicker.ok()
+    datePicker.ok();
   }
-}
+};
 //现在回调
 const footOnNow = () => {
   hms.value.hh = dayjs().hour();
   hms.value.mm = dayjs().minute();
   hms.value.ss = dayjs().second();
   scrollTo();
-}
+};
 
 //清空回调
 const footOnClear = () => {
@@ -130,5 +148,5 @@ const footOnClear = () => {
   hms.value.mm = 0;
   hms.value.ss = 0;
   scrollTo();
-}
+};
 </script>

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

@@ -13,14 +13,23 @@
       ref="ScrollRef"
     >
       <ul class="layui-laydate-list laydate-year-list">
-        <li v-for="item of yearList" :key="item" :class="{ 'layui-this': Year === item }"
+        <li
-          @click="handleYearClick(item)">{{ item }}
+          v-for="item of yearList"
+          :key="item"
+          :class="{ 'layui-this': Year === item }"
+          @click="handleYearClick(item)"
+        >
+          {{ item }}
         </li>
       </ul>
     </div>
     <PanelFoot @ok="footOnOk" @now="footOnNow" @clear="footOnClear">
-      <span v-if="datePicker.type === 'yearmonth'" @click="datePicker.showPanel.value = 'month'"
+      <span
-        class="laydate-btns-time">选择月份</span>
+        v-if="datePicker.type === 'yearmonth'"
+        @click="datePicker.showPanel.value = 'month'"
+        class="laydate-btns-time"
+        >选择月份</span
+      >
       <template v-else>{{ Year }}</template>
     </PanelFoot>
   </div>
@@ -31,26 +40,25 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import { inject, nextTick, onMounted, ref, watch } from 'vue';
+import { inject, nextTick, onMounted, ref, watch } from "vue";
-import { getYears } from '../day';
+import { getYears } from "../day";
-import { provideType } from '../interface';
+import { provideType } from "../interface";
-import PanelFoot from './PanelFoot.vue'
+import PanelFoot from "./PanelFoot.vue";
 
 export interface TimePanelProps {
   modelValue: number | string;
   max?: number;
 }
 const props = withDefaults(defineProps<TimePanelProps>(), {
-  max: dayjs().year() + 100
+  max: dayjs().year() + 100,
 });
-const emits = defineEmits(['update:modelValue', 'ok']);
+const emits = defineEmits(["update:modelValue", "ok"]);
-const datePicker: provideType = inject('datePicker') as provideType;
+const datePicker: provideType = inject("datePicker") as provideType;
 const yearList = ref<number[]>(getYears());
 const unWatch = ref(false);
 const Year = ref(props.modelValue);
 
-
 // 点击年份
 const handleYearClick = (item: any) => {
   unWatch.value = true;
@@ -61,7 +69,7 @@ const handleYearClick = (item: any) => {
     } else if (datePicker.type === "yearmonth") {
       datePicker.currentDay.value = dayjs().year(item).valueOf();
       datePicker.showPanel.value = "month";
-      emits('update:modelValue', Year.value);
+      emits("update:modelValue", Year.value);
     } else {
       datePicker.showPanel.value = "date";
     }
@@ -79,10 +87,13 @@ const handleYearClick = (item: any) => {
 const ScrollRef = ref();
 onMounted(() => {
   scrollTo();
-})
+});
-watch(() => Year, () => {
+watch(
-  Year.value = props.modelValue;
+  () => Year,
-})
+  () => {
+    Year.value = props.modelValue;
+  }
+);
 const scrollTo = () => {
   nextTick(() => {
     let scrollTop = 0;
@@ -94,33 +105,33 @@ const scrollTo = () => {
         break;
       }
     }
-    ScrollRef.value.scrollTo(0, scrollTop)
+    ScrollRef.value.scrollTo(0, scrollTop);
-  })
+  });
-}
+};
 
 //关闭回调
 const footOnOk = () => {
-  emits('update:modelValue', Year.value)
+  emits("update:modelValue", Year.value);
   if (datePicker.range) {
     //关闭菜单
-    emits('ok');
+    emits("ok");
     return;
   } else {
-    datePicker.ok()
+    datePicker.ok();
   }
-}
+};
 
 //现在回调
 const footOnNow = () => {
   Year.value = dayjs().year();
-  if (datePicker.type === 'yearmonth') {
+  if (datePicker.type === "yearmonth") {
     datePicker.currentMonth.value = dayjs().month();
   }
   scrollTo();
-}
+};
 
 //清空回调
 const footOnClear = () => {
-  Year.value = ''
+  Year.value = "";
-}
+};
 </script>

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

@@ -1,25 +1,36 @@
 <template>
   <div class="layui-laydate-content">
-    <table style="width:100%">
+    <table style="width: 100%">
       <thead>
         <tr>
           <th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
         </tr>
       </thead>
       <tbody>
-        <template v-for="(o, i) of dateList.length % 7 == 0
+        <template
-        ? dateList.length / 7
+          v-for="(o, i) of dateList.length % 7 == 0
-        : Math.floor(dateList.length / 7) + 1" :key="i">
+            ? dateList.length / 7
+            : Math.floor(dateList.length / 7) + 1"
+          :key="i"
+        >
           <tr>
-            <td v-for="(item, index) of dateList.slice(
+            <td
-              i * 7,
+              v-for="(item, index) of dateList.slice(i * 7, i * 7 + 7)"
-              i * 7 + 7
+              :key="index"
-            )" :key="index" :data-unix="item.value" :class="{
+              :data-unix="item.value"
-  'laydate-day-prev': item.type !== 'current',
+              :class="{
-  'layui-this': item.value === modelValue || (datePicker.range && item.type === 'current' && (item.value == startDate || item.value == endDate)),
+                'laydate-day-prev': item.type !== 'current',
-  'laydate-range-hover': ifHasRangeHoverClass(item),
+                'layui-this':
-  'layui-disabled': item.type !== 'current' && datePicker.range
+                  item.value === modelValue ||
-}" @click="handleDayClick(item)" @mouseenter="dayItemMouseEnter($event, item)">
+                  (datePicker.range &&
+                    item.type === 'current' &&
+                    (item.value == startDate || item.value == endDate)),
+                'laydate-range-hover': ifHasRangeHoverClass(item),
+                'layui-disabled': item.type !== 'current' && datePicker.range,
+              }"
+              @click="handleDayClick(item)"
+              @mouseenter="dayItemMouseEnter($event, item)"
+            >
               {{ item.day }}
             </td>
           </tr>
@@ -50,11 +61,17 @@ const props = withDefaults(defineProps<DateContentProps>(), {
   modelValue: -1,
   hoverDate: -1,
   startDate: -1,
-  endDate: -1
+  endDate: -1,
 });
 const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
-const datePicker: provideType = inject('datePicker') as provideType;
+const datePicker: provideType = inject("datePicker") as provideType;
-const emits = defineEmits(['update:modelValue', 'update:startDate', 'update:endDate', 'update:hoverDate','simple']);
+const emits = defineEmits([
+  "update:modelValue",
+  "update:startDate",
+  "update:endDate",
+  "update:hoverDate",
+  "simple",
+]);
 
 // 点击日期
 const handleDayClick = (item: any) => {
@@ -64,28 +81,31 @@ const handleDayClick = (item: any) => {
     }
 
     if (props.startDate === -1 && props.endDate === -1) {
-      emits('update:startDate', item.value)
+      emits("update:startDate", item.value);
     } else if (props.startDate !== -1 && props.endDate !== -1) {
-      emits('update:hoverDate', item.value);
+      emits("update:hoverDate", item.value);
-      emits('update:startDate', item.value)
+      emits("update:startDate", item.value);
-      emits('update:endDate', -1)
+      emits("update:endDate", -1);
     } else if (props.startDate !== -1 && props.endDate === -1) {
-      emits('update:endDate', item.value)
+      emits("update:endDate", item.value);
       if (item.value < props.startDate) {
         //swap
         const first = props.startDate;
         const last = item.value;
-        emits('update:startDate', last);
+        emits("update:startDate", last);
-        emits('update:endDate', first);
+        emits("update:endDate", first);
       }
     }
   } else {
-    emits('update:modelValue', item.value);
+    emits("update:modelValue", item.value);
     if (item.type !== "current") {
-      datePicker.currentMonth.value = item.type === "prev" ? datePicker.currentMonth.value - 1 : datePicker.currentMonth.value + 1;
+      datePicker.currentMonth.value =
+        item.type === "prev"
+          ? datePicker.currentMonth.value - 1
+          : datePicker.currentMonth.value + 1;
     }
     if (datePicker.simple) {
-     emits('simple');
+      emits("simple");
     }
   }
 };
@@ -101,30 +121,33 @@ const dayItemMouseEnter = (event: MouseEvent, item: any) => {
     return;
   }
   if (props.startDate !== -1 && props.endDate !== -1) {
-    emits('update:hoverDate', -1);
+    emits("update:hoverDate", -1);
     return;
   }
-  emits('update:hoverDate', parseInt((event.target as HTMLElement).dataset.unix as string));
+  emits(
-}
+    "update:hoverDate",
+    parseInt((event.target as HTMLElement).dataset.unix as string)
+  );
+};
 const ifHasRangeHoverClass = computed(() => {
   return function (item: any) {
     if (!datePicker.range) {
       return false;
     }
     if (props.startDate === -1) {
-      return false
+      return false;
     }
     if (item.type !== "current") {
       return false;
     }
-    if(props.hoverDate===-1&&props.endDate===-1){
+    if (props.hoverDate === -1 && props.endDate === -1) {
-      return false
+      return false;
     }
     let hover = props.endDate !== -1 ? props.endDate : props.hoverDate;
     let max = props.startDate > hover ? props.startDate : hover;
-    let min = props.startDate < hover ? props.startDate : hover
+    let min = props.startDate < hover ? props.startDate : hover;
     if (item.value >= min && item.value <= max) {
-      return true
+      return true;
     }
     return false;
   };

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

@@ -1,30 +1,68 @@
 <template>
   <div>
-    <lay-dropdown ref="dropdownRef" :disabled="disabled" :autoFitMinWidth="false">
+    <lay-dropdown
-      <lay-input readonly :name="name" :model-value="(dateValue as string)" :placeholder="placeholder"
+      ref="dropdownRef"
-        prefix-icon="layui-icon-date" :disabled="disabled" v-if="!range">
+      :disabled="disabled"
+      :autoFitMinWidth="false"
+    >
+      <lay-input
+        readonly
+        :name="name"
+        :model-value="(dateValue as string)"
+        :placeholder="placeholder"
+        prefix-icon="layui-icon-date"
+        :disabled="disabled"
+        v-if="!range"
+      >
       </lay-input>
       <div class="laydate-range-inputs" v-else>
-        <lay-input readonly :name="name" :model-value="dateValue[0]" :disabled="disabled" class="start-input">
+        <lay-input
+          readonly
+          :name="name"
+          :model-value="dateValue[0]"
+          :disabled="disabled"
+          class="start-input"
+        >
         </lay-input>
         <span class="range-separator">{{ rangeSeparator }}</span>
-        <lay-input readonly :name="name" :model-value="dateValue[1]" :disabled="disabled" class="end-input">
+        <lay-input
+          readonly
+          :name="name"
+          :model-value="dateValue[1]"
+          :disabled="disabled"
+          class="end-input"
+        >
         </lay-input>
       </div>
 
       <template #content>
         <!-- 日期选择 -->
-        <DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')" v-model="currentDay"></DatePanel>
+        <DatePanel
+          v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model="currentDay"
+        ></DatePanel>
         <!-- 时间选择 -->
-        <TimePanel v-if="!range && showPanel === 'time'" v-model="hms"></TimePanel>
+        <TimePanel
+          v-if="!range && showPanel === 'time'"
+          v-model="hms"
+        ></TimePanel>
         <!-- 年份选择器 -->
-        <YearPanel v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')" v-model="currentYear">
+        <YearPanel
+          v-if="!range && (showPanel === 'year' || showPanel === 'yearmonth')"
+          v-model="currentYear"
+        >
         </YearPanel>
         <!-- 月份选择器 -->
-        <MonthPanel v-if="!range && showPanel === 'month'" v-model="currentMonth"></MonthPanel>
+        <MonthPanel
+          v-if="!range && showPanel === 'month'"
+          v-model="currentMonth"
+        ></MonthPanel>
         <!-- 范围选择 -->
-        <DateRange v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
+        <DateRange
-          v-model:startTime="rangeValue.first" v-model:endTime="rangeValue.last"></DateRange>
+          v-if="range && (showPanel === 'date' || showPanel === 'datetime')"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        ></DateRange>
       </template>
     </lay-dropdown>
   </div>
@@ -43,12 +81,20 @@ import { LayIcon } from "@layui/icons-vue";
 import LayInput from "../input/index.vue";
 import LayDropdown from "../dropdown/index.vue";
 import { getMonth, getYear, getDay } from "./day";
-import { ref, watch, defineProps, defineEmits, onMounted, reactive, provide } from "vue";
+import {
-import DatePanel from './components/DatePanel.vue';
+  ref,
-import TimePanel from './components/TimePanel.vue';
+  watch,
-import YearPanel from './components/YearPanel.vue';
+  defineProps,
-import MonthPanel from './components/MonthPanel.vue';
+  defineEmits,
-import DateRange from './components/DateRange.vue';
+  onMounted,
+  reactive,
+  provide,
+} from "vue";
+import DatePanel from "./components/DatePanel.vue";
+import TimePanel from "./components/TimePanel.vue";
+import YearPanel from "./components/YearPanel.vue";
+import MonthPanel from "./components/MonthPanel.vue";
+import DateRange from "./components/DateRange.vue";
 
 export interface LayDatePickerProps {
   type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
@@ -69,7 +115,7 @@ const props = withDefaults(defineProps<LayDatePickerProps>(), {
   disabled: false,
   simple: false,
   range: false,
-  rangeSeparator: '至'
+  rangeSeparator: "至",
 });
 
 const dropdownRef = ref(null);
@@ -83,68 +129,103 @@ const currentYear = ref<number>(0);
 const currentMonth = ref<number>(0);
 const currentDay = ref<number>(0);
 const showPanel = ref<string>("date");
-const rangeValue = reactive({ first: '', last: '' })
+const rangeValue = reactive({ first: "", last: "" });
 
 let unWatch = false;
 // 计算结果日期
-const dateValue = props.range ? ref(['', '']) : ref('');
+const dateValue = props.range ? ref(["", ""]) : ref("");
 const getDateValue = () => {
   unWatch = true;
   let dayjsVal;
   switch (props.type) {
     case "date":
-      dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).format("YYYY-MM-DD") : '';
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value).format("YYYY-MM-DD")
+          : "";
       break;
     case "datetime":
-      dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("YYYY-MM-DD HH:mm:ss") : '';
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value)
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format("YYYY-MM-DD HH:mm:ss")
+          : "";
       break;
     case "year":
-      dayjsVal = currentYear.value !== -1 ? dayjs().year(currentYear.value).format('YYYY') : '';
+      dayjsVal =
+        currentYear.value !== -1
+          ? dayjs().year(currentYear.value).format("YYYY")
+          : "";
       break;
     case "month":
-      dayjsVal = currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : '';
+      dayjsVal =
+        currentMonth.value !== -1 ? (currentMonth.value + 1).toString() : "";
       break;
     case "time":
-      dayjsVal = dayjs().hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format("HH:mm:ss");
+      dayjsVal = dayjs()
+        .hour(hms.value.hh)
+        .minute(hms.value.mm)
+        .second(hms.value.ss)
+        .format("HH:mm:ss");
       break;
     case "yearmonth":
-      dayjsVal = dayjs().year(currentYear.value).month(currentMonth.value).format("YYYY-MM");
+      dayjsVal = dayjs()
+        .year(currentYear.value)
+        .month(currentMonth.value)
+        .format("YYYY-MM");
       break;
     default:
-      dayjsVal = currentDay.value !== -1 ? dayjs(currentDay.value).hour(hms.value.hh).minute(hms.value.mm).second(hms.value.ss).format() : '';
+      dayjsVal =
+        currentDay.value !== -1
+          ? dayjs(currentDay.value)
+              .hour(hms.value.hh)
+              .minute(hms.value.mm)
+              .second(hms.value.ss)
+              .format()
+          : "";
       break;
   }
   dateValue.value = dayjsVal;
   $emits("update:modelValue", dayjsVal);
-  setTimeout(() => { unWatch = false; }, 0);
+  setTimeout(() => {
+    unWatch = false;
+  }, 0);
 };
 const getDateValueByRange = () => {
   unWatch = true;
-  if (rangeValue.first === '' || rangeValue.last === '') {
+  if (rangeValue.first === "" || rangeValue.last === "") {
-    dateValue.value = ['', ''];
+    dateValue.value = ["", ""];
     return;
   }
-  let format = props.type === 'datetime' ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+  let format = props.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  dateValue.value = [dayjs(rangeValue.first).format(format), dayjs(rangeValue.last).format(format)];
+  dateValue.value = [
+    dayjs(rangeValue.first).format(format),
+    dayjs(rangeValue.last).format(format),
+  ];
   $emits("update:modelValue", dateValue.value);
-  setTimeout(() => { unWatch = false; }, 0);
+  setTimeout(() => {
-}
+    unWatch = false;
+  }, 0);
+};
 
 // 确认事件
 const ok = () => {
   if (!props.range) {
-    if (props.type === 'time') {
+    if (props.type === "time") {
-      getDateValue()
+      getDateValue();
     } else {
-      getDateValue()
+      getDateValue();
     }
   } else {
-    getDateValueByRange()
+    getDateValueByRange();
   }
   if (dropdownRef.value)
     // @ts-ignore
     dropdownRef.value.hide();
-  showPanel.value = props.type
+  showPanel.value = props.type;
 };
 
 //面板类型判断
@@ -152,43 +233,53 @@ watch(
   () => props.type,
   () => {
     showPanel.value = props.type;
-    if (props.type === 'yearmonth') {
+    if (props.type === "yearmonth") {
-      showPanel.value = 'year';
+      showPanel.value = "year";
     }
   },
   { immediate: true }
 );
 
 //监听modelValue改变
-watch(() => props.modelValue, () => {
+watch(
-  if (unWatch) {
+  () => props.modelValue,
-    return;
+  () => {
-  }
+    if (unWatch) {
-  let initModelValue = props.range && props.modelValue ? (props.modelValue as string[])[0] || '' : props.modelValue as string;
+      return;
-  hms.value.hh = dayjs(initModelValue).hour();
+    }
-  hms.value.mm = dayjs(initModelValue).minute();
+    let initModelValue =
-  hms.value.ss = dayjs(initModelValue).second();
+      props.range && props.modelValue
+        ? (props.modelValue as string[])[0] || ""
+        : (props.modelValue as string);
+    hms.value.hh = dayjs(initModelValue).hour();
+    hms.value.mm = dayjs(initModelValue).minute();
+    hms.value.ss = dayjs(initModelValue).second();
 
-  if (initModelValue.length === 8 && props.type === 'time') { //dayjs 解析时间容错
+    if (initModelValue.length === 8 && props.type === "time") {
-    let modelValue = initModelValue;
+      //dayjs 解析时间容错
-    modelValue = '1970-01-01 ' + modelValue;
+      let modelValue = initModelValue;
-    hms.value.hh = dayjs(modelValue).hour();
+      modelValue = "1970-01-01 " + modelValue;
-    hms.value.mm = dayjs(modelValue).minute();
+      hms.value.hh = dayjs(modelValue).hour();
-    hms.value.ss = dayjs(modelValue).second();
+      hms.value.mm = dayjs(modelValue).minute();
-  }
+      hms.value.ss = dayjs(modelValue).second();
-  currentYear.value = getYear(initModelValue);
+    }
-  currentMonth.value = getMonth(initModelValue);
+    currentYear.value = getYear(initModelValue);
-  currentDay.value = getDay(initModelValue);
+    currentMonth.value = getMonth(initModelValue);
-
+    currentDay.value = getDay(initModelValue);
-  rangeValue.first = initModelValue;
-  rangeValue.last = props.range && props.modelValue ? (props.modelValue as string[])[1] || '' : '';
-  if (!props.range) {
-    getDateValue();
-  } else {
-    getDateValueByRange();
-  }
-}, { immediate: true })
 
+    rangeValue.first = initModelValue;
+    rangeValue.last =
+      props.range && props.modelValue
+        ? (props.modelValue as string[])[1] || ""
+        : "";
+    if (!props.range) {
+      getDateValue();
+    } else {
+      getDateValueByRange();
+    }
+  },
+  { immediate: true }
+);
 
 provide("datePicker", {
   currentYear: currentYear,
@@ -203,6 +294,6 @@ provide("datePicker", {
   range: props.range,
   rangeValue: rangeValue,
   rangeSeparator: props.rangeSeparator,
-  simple: props.simple
+  simple: props.simple,
 });
 </script>

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

@@ -3,18 +3,24 @@ import { Ref } from "vue";
 export type DatePickerType = "date" | "datetime" | "year" | "time" | "month";
 
 export type provideType = {
-  currentYear: Ref,
+  currentYear: Ref;
-  currentMonth: Ref,
+  currentMonth: Ref;
-  currentDay: Ref,
+  currentDay: Ref;
-  dateValue: Ref,
+  dateValue: Ref;
-  hms: Ref,
+  hms: Ref;
-  type: string,
+  type: string;
-  showPanel: Ref,
+  showPanel: Ref;
-  clear: Function,
+  clear: Function;
-  now: Function,
+  now: Function;
-  ok: Function,
+  ok: Function;
-  range: boolean,
+  range: boolean;
-  rangeValue: { first: string, last: string, hover: string, firstTime: { hh: number, mm: number, ss: number }, lastTime: { hh: number, mm: number, ss: number } },
+  rangeValue: {
-  rangeSeparator: string,
+    first: string;
-  simple: boolean,
+    last: string;
-}
+    hover: string;
+    firstTime: { hh: number; mm: number; ss: number };
+    lastTime: { hh: number; mm: number; ss: number };
+  };
+  rangeSeparator: string;
+  simple: boolean;
+};

package/component/src/component/input/index.vue

@@ -48,13 +48,18 @@ const emit = defineEmits<InputEmits>();
 const { t } = useI18n();
 const slots = useSlots();
 const type = ref(props.type);
-const currentValue = ref<string>(String(props.modelValue == null ? "" : props.modelValue));
+const currentValue = ref<string>(
+  String(props.modelValue == null ? "" : props.modelValue)
+);
 const hasContent = computed(() => (props.modelValue as string)?.length > 0);
-const isPassword = computed(() => type.value == "password")
+const isPassword = computed(() => type.value == "password");
 
-watch(() => props.type, () => {
+watch(
-  type.value = props.type;
+  () => props.type,
-})
+  () => {
+    type.value = props.type;
+  }
+);
 
 watch(
   () => props.modelValue,
@@ -101,12 +106,12 @@ const classes = computed(() => {
 });
 
 const showPassword = () => {
-  if(isPassword.value) {
+  if (isPassword.value) {
     type.value = "text";
   } else {
     type.value = "password";
   }
-}
+};
 </script>
 
 <template>
@@ -147,7 +152,10 @@ const showPassword = () => {
         ></lay-icon>
       </span>
       <span class="layui-input-password" v-if="password">
-        <lay-icon :type="isPassword ? 'layui-icon-face-smile' : 'layui-icon-face-cry'" @click="showPassword"></lay-icon>
+        <lay-icon
+          :type="isPassword ? 'layui-icon-face-smile' : 'layui-icon-face-cry'"
+          @click="showPassword"
+        ></lay-icon>
       </span>
       <span class="layui-input-clear" v-if="allowClear && hasContent">
         <lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>

package/document-component/src/document/zh-CN/components/input.md

@@ -261,6 +261,7 @@ export default {
 | allow-clear              | 允许清空 allow-clear  | `true` `false` |
 | prefix-icon              | 前置图标              | --             |
 | suffix-icon              | 后置图标              | --             |
+| password                 | 开启密码显示隐藏       | `true` `false`|
 
 :::