📝(select): update

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

@@ -279,16 +279,22 @@ const closeRightMonthPanel = () => {
 const footOnOk = () => {
   let format =
     datePicker.type === "datetime" ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
-  let startTimeVal =startTime.day!==-1&&endTime.day!==-1?dayjs(startTime.day)
+  let startTimeVal =
+    startTime.day !== -1 && endTime.day !== -1
+      ? dayjs(startTime.day)
           .hour(startTime.hms.hh)
           .minute(startTime.hms.mm)
           .second(startTime.hms.ss)
-    .format(format):'';
+          .format(format)
-  let endTimeVal = startTime.day!==-1&&endTime.day!==-1?dayjs(endTime.day)
+      : "";
+  let endTimeVal =
+    startTime.day !== -1 && endTime.day !== -1
+      ? dayjs(endTime.day)
           .hour(endTime.hms.hh)
           .minute(endTime.hms.mm)
           .second(endTime.hms.ss)
-    .format(format):'';
+          .format(format)
+      : "";
   emits("update:startTime", startTimeVal);
   emits("update:endTime", endTimeVal);
   datePicker.ok();
@@ -296,18 +302,18 @@ const footOnOk = () => {
 
 //现在回调
 const footOnNow = () => {
-  startTime.year=dayjs().year();
+  startTime.year = dayjs().year();
-  startTime.month=dayjs().month();
+  startTime.month = dayjs().month();
-  startTime.day=new Date(new Date().toDateString()).getTime();
+  startTime.day = new Date(new Date().toDateString()).getTime();
-  startTime.hms.hh=dayjs().hour();
+  startTime.hms.hh = dayjs().hour();
-  startTime.hms.mm=dayjs().minute();
+  startTime.hms.mm = dayjs().minute();
-  startTime.hms.ss=dayjs().second();
+  startTime.hms.ss = dayjs().second();
-  endTime.day=-1;
+  endTime.day = -1;
 };
 
 //清空回调
 const footOnClear = () => {
-  startTime.day=-1;
+  startTime.day = -1;
-  endTime.day=-1;
+  endTime.day = -1;
 };
 </script>

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

@@ -3,21 +3,43 @@
     <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="changeYear(-1)"></i>
+          <i
+            class="layui-icon laydate-icon laydate-prev-y"
+            @click="changeYear(-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="closeLeftYearPanel"></YearPanel>
+                <YearPanel
+                  class="time-panel"
+                  v-model="startTime.year"
+                  @ok="closeLeftYearPanel"
+                ></YearPanel>
               </template>
             </lay-dropdown>
           </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" :data-unix="getUnix(item, 'left')"
+            <li
-              :class="{ 'layui-this': getUnix(item, 'left') === startTime.unix || getUnix(item, 'left') === endTime.unix, 'laydate-range-hover': ifHasRangeHoverClass(getUnix(item, 'left')) }"
+              v-for="item of MONTH_NAME"
-              @click="handleMonthClick(getUnix(item, 'left'))" @mouseenter="monthItemMouseEnter($event, item)">
+              :key="item"
+              :data-unix="getUnix(item, 'left')"
+              :class="{
+                'layui-this':
+                  getUnix(item, 'left') === startTime.unix ||
+                  getUnix(item, 'left') === endTime.unix,
+                'laydate-range-hover': ifHasRangeHoverClass(
+                  getUnix(item, 'left')
+                ),
+              }"
+              @click="handleMonthClick(getUnix(item, 'left'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
               {{ item.slice(0, 3) }}
             </li>
           </ul>
@@ -29,17 +51,37 @@
             <lay-dropdown ref="dropdownYearPanelRefRight">
               <span class="laydate-range-time">{{ startTime.year + 1 }}年</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>
           </div>
-          <i class="layui-icon laydate-icon laydate-next-y" @click="changeYear(1)"></i>
+          <i
+            class="layui-icon laydate-icon laydate-next-y"
+            @click="changeYear(1)"
+            ></i
+          >
         </div>
         <div class="layui-laydate-content" style="height: 220px">
           <ul class="layui-laydate-list laydate-month-list">
-            <li v-for="item of MONTH_NAME" :key="item" :data-unix="getUnix(item, 'right')"
+            <li
-              :class="{ 'layui-this': getUnix(item, 'right') === startTime.unix || getUnix(item, 'right') === endTime.unix, 'laydate-range-hover': ifHasRangeHoverClass(getUnix(item, 'right')) }"
+              v-for="item of MONTH_NAME"
-              @click="handleMonthClick(getUnix(item, 'right'))" @mouseenter="monthItemMouseEnter($event, item)">
+              :key="item"
+              :data-unix="getUnix(item, 'right')"
+              :class="{
+                'layui-this':
+                  getUnix(item, 'right') === startTime.unix ||
+                  getUnix(item, 'right') === endTime.unix,
+                'laydate-range-hover': ifHasRangeHoverClass(
+                  getUnix(item, 'right')
+                ),
+              }"
+              @click="handleMonthClick(getUnix(item, 'right'))"
+              @mouseenter="monthItemMouseEnter($event, item)"
+            >
               {{ item.slice(0, 3) }}
             </li>
           </ul>
@@ -83,11 +125,15 @@ const datePicker: provideType = inject("datePicker") as provideType;
 
 const startTime = reactive({
   year: props.startTime ? dayjs(props.startTime).year() : dayjs().year(),
-  unix: props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1,
+  unix: props.startTime
+    ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
+    : -1,
 });
 const endTime = reactive({
   year: props.endTime ? dayjs(props.endTime).year() : dayjs().year() + 1,
-  unix: props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1,
+  unix: props.startTime
+    ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+    : -1,
 });
 let hoverMonth = ref(-1);
 const MONTH_NAME = [
@@ -134,11 +180,17 @@ const handleMonthClick = (item: number) => {
 watch(
   () => [props.startTime, props.endTime],
   () => {
-    startTime.year = props.startTime ? dayjs(props.startTime).year() : dayjs().year();
+    startTime.year = props.startTime
-    startTime.unix = props.startTime ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf() : -1;
+      ? dayjs(props.startTime).year()
+      : dayjs().year();
+    startTime.unix = props.startTime
+      ? dayjs(props.startTime).hour(0).minute(0).second(0).valueOf()
+      : -1;
     endTime.year = props.endTime ? dayjs(props.endTime).year() : dayjs().year();
-    endTime.unix = props.startTime ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf() : -1;
+    endTime.unix = props.startTime
-  },
+      ? dayjs(props.endTime).hour(0).minute(0).second(0).valueOf()
+      : -1;
+  }
 );
 
 //关闭选择时间的面板
@@ -155,8 +207,14 @@ const closeRightYearPanel = () => {
 //关闭回调
 const footOnOk = () => {
   let format = "YYYY-MM";
-  let startTimeVal = startTime.unix !== -1 && endTime.unix !== -1 ? dayjs(startTime.unix).format(format) : '';
+  let startTimeVal =
-  let endTimeVal = endTime.unix !== -1 && endTime.unix !== -1 ? dayjs(endTime.unix).format(format) : '';
+    startTime.unix !== -1 && endTime.unix !== -1
+      ? dayjs(startTime.unix).format(format)
+      : "";
+  let endTimeVal =
+    endTime.unix !== -1 && endTime.unix !== -1
+      ? dayjs(endTime.unix).format(format)
+      : "";
   emits("update:startTime", startTimeVal);
   emits("update:endTime", endTimeVal);
   datePicker.ok();
@@ -165,7 +223,9 @@ const footOnOk = () => {
 //现在回调
 const footOnNow = () => {
   startTime.year = dayjs().year();
-  startTime.unix = dayjs(startTime.year + '-' + (dayjs().month() + 1)).valueOf();
+  startTime.unix = dayjs(
+    startTime.year + "-" + (dayjs().month() + 1)
+  ).valueOf();
   endTime.unix = -1;
   hoverMonth.value = -1;
 };
@@ -188,7 +248,9 @@ const monthItemMouseEnter = (event: MouseEvent, item: any) => {
     hoverMonth.value = -1;
     return;
   }
-  hoverMonth.value = parseInt((event.target as HTMLElement).dataset.unix as string);
+  hoverMonth.value = parseInt(
+    (event.target as HTMLElement).dataset.unix as string
+  );
 };
 const ifHasRangeHoverClass = computed(() => {
   return function (item: any) {
@@ -212,10 +274,10 @@ const ifHasRangeHoverClass = computed(() => {
 });
 
 const getUnix = computed(() => {
-  return function (item: any, position: 'left' | 'right') {
+  return function (item: any, position: "left" | "right") {
     let month = MONTH_NAME.indexOf(item);
-    let year = position === 'left' ? startTime.year : startTime.year + 1;
+    let year = position === "left" ? startTime.year : startTime.year + 1;
-    return dayjs(year + '-' + (month + 1)).valueOf();
+    return dayjs(year + "-" + (month + 1)).valueOf();
-  }
+  };
-})
+});
 </script>

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

@@ -1,33 +1,74 @@
 <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>
 
-        <MonthRange v-if="range && showPanel === 'yearmonth'" v-model:startTime="rangeValue.first"
+        <MonthRange
-          v-model:endTime="rangeValue.last">
+          v-if="range && showPanel === 'yearmonth'"
+          v-model:startTime="rangeValue.first"
+          v-model:endTime="rangeValue.last"
+        >
         </MonthRange>
       </template>
     </lay-dropdown>
@@ -168,16 +209,16 @@ const getDateValueByRange = () => {
     $emits("update:modelValue", dateValue.value);
     return;
   }
-  let format ="YYYY-MM-DD";
+  let format = "YYYY-MM-DD";
   switch (props.type) {
     case "date":
-      format = 'YYYY-MM-DD';
+      format = "YYYY-MM-DD";
       break;
     case "datetime":
-      format = 'YYYY-MM-DD HH:mm:ss';
+      format = "YYYY-MM-DD HH:mm:ss";
       break;
     case "yearmonth":
-      format = 'YYYY-MM';
+      format = "YYYY-MM";
       break;
   }
   dateValue.value = [

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

@@ -263,6 +263,9 @@ export default {
 ::: demo
 
 <template>
+  <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
+  <br/>
+  <br/>
   <lay-select v-model="mvalue" @change="change" multiple>
     <lay-select-option value="1" label="学习"></lay-select-option>
     <lay-select-option value="2" label="编码" disabled></lay-select-option>
@@ -272,7 +275,6 @@ export default {
     <lay-select-option value="6" label="打篮球"></lay-select-option>
     <lay-select-option value="7" label="rap"></lay-select-option>
   </lay-select>
-  <lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
 </template>
 
 <script>