theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): datePicker组件 新增layui-laydate-current样式,用于modelValue为空时高亮当前时间

Browse Source
This commit is contained in:
0o张不歪o0 2022-11-14 10:23:10 +08:00
parent 3caf99a721
commit 2bc0517d64
5 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package/component/src/component/datePicker/components/MonthPanel.vue
View File

@ -16,7 +16,10 @@
<li <li
v-for="item of MONTH_NAME" v-for="item of MONTH_NAME"
:key="item" :key="item"
:class="{ 'layui-this': MONTH_NAME.indexOf(item) === Month }" :class="{
'layui-this': MONTH_NAME.indexOf(item) === Month,
'layui-laydate-current':Month===''&&parseInt(item)-1===dayjs().month()
}"
@click="handleMonthClick(item)" @click="handleMonthClick(item)"
> >
{{ item.slice(0, 3) }} {{ item.slice(0, 3) }}

2
package/component/src/component/datePicker/components/MonthRange.vue
View File

@ -36,6 +36,7 @@
'laydate-range-hover': ifHasRangeHoverClass( 'laydate-range-hover': ifHasRangeHoverClass(
getUnix(item, 'left') getUnix(item, 'left')
), ),
'layui-laydate-current':(startTime.unix === -1 || endTime.unix === -1)&&getUnix(item, 'left')===dayjs().startOf('month').valueOf()
}" }"
@click="handleMonthClick(getUnix(item, 'left'))" @click="handleMonthClick(getUnix(item, 'left'))"
@mouseenter="monthItemMouseEnter($event, item)" @mouseenter="monthItemMouseEnter($event, item)"
@ -80,6 +81,7 @@
'laydate-range-hover': ifHasRangeHoverClass( 'laydate-range-hover': ifHasRangeHoverClass(
getUnix(item, 'right') getUnix(item, 'right')
), ),
'layui-laydate-current':(startTime.unix === -1 || endTime.unix === -1)&&getUnix(item, 'right')===dayjs().startOf('month').valueOf()
}" }"
@click="handleMonthClick(getUnix(item, 'right'))" @click="handleMonthClick(getUnix(item, 'right'))"
@mouseenter="monthItemMouseEnter($event, item)" @mouseenter="monthItemMouseEnter($event, item)"

5
package/component/src/component/datePicker/components/YearPanel.vue
View File

@ -18,7 +18,10 @@
<li <li
v-for="item of yearList" v-for="item of yearList"
:key="item" :key="item"
:class="{ 'layui-this': Year === item }" :class="{
'layui-this': Year === item,
'layui-laydate-current':!Year&&item===dayjs().year()
}"
@click="handleYearClick(item)" @click="handleYearClick(item)"
> >
{{ item }} {{ item }}

2
package/component/src/component/datePicker/components/components/DateContent.vue
View File

@ -27,6 +27,7 @@
(item.value == startDate || item.value == endDate)), (item.value == startDate || item.value == endDate)),
'laydate-range-hover': ifHasRangeHoverClass(item), 'laydate-range-hover': ifHasRangeHoverClass(item),
'layui-disabled': item.type !== 'current' && datePicker.range, 'layui-disabled': item.type !== 'current' && datePicker.range,
'layui-laydate-current':modelValue===-1&&item.value===dayjs().startOf('day').valueOf()
}" }"
@click="handleDayClick(item)" @click="handleDayClick(item)"
@mouseenter="dayItemMouseEnter($event, item)" @mouseenter="dayItemMouseEnter($event, item)"
@ -48,6 +49,7 @@ export default {
import { useI18n } from "../../../../language"; import { useI18n } from "../../../../language";
import { computed, inject } from "vue"; import { computed, inject } from "vue";
import { provideType } from "../../interface"; import { provideType } from "../../interface";
import dayjs from "dayjs";
export interface DateContentProps { export interface DateContentProps {
dateList: any; dateList: any;

3
package/component/src/component/datePicker/index.less
View File

@ -576,4 +576,7 @@ html #layuicss-laydate {
.layui-laydate-main{ .layui-laydate-main{
width: 340px; width: 340px;
} }
}
.layui-laydate-current{
background-color: var(--global-neutral-color-3);
} }