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

♻️(component): 优化datePicker细节

Browse Source
This commit is contained in:
0o张不歪o0 2022-07-15 11:11:35 +08:00
parent 188f16a34a
commit 16bdc0427a
7 changed files with 227 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
package/component/src/component/datePicker/components/DatePanel.vue
View File

@ -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">
<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>
<DateContent :date-list="datePicker.dateList" v-model="datePicker.currentDay.value"></DateContent>
<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'
export interface Props {
range?: boolean,
rangeValue?: { first: string, last: string, hover: string }
}
const props = withDefaults(defineProps<Props>(), {
range: false,
rangeValue: () => { return { first: '', last: '', hover: '' } }
});
import DateContent from './components/DateContent.vue'
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>

18
package/component/src/component/datePicker/components/PanelFoot.vue
View File

@ -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-else-if="datePicker.type === 'year'">{{ datePicker.currentYear.value }}</template>
<template v-else-if="datePicker.type === 'time'">{{
datePicker.hms.value.hh + ':' + datePicker.hms.value.mm + ':' + (datePicker.hms.value.ss === 0 ? '0' : '') + datePicker.hms.value.ss
}}</template>
<template v-if="datePicker.type === 'month' && datePicker.currentMonth.value != -1">
{{ datePicker.currentMonth.value + 1 }}
</template>
<template v-else-if="datePicker.type === 'year' && datePicker.currentYear.value != -1">
{{ 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">

37
package/component/src/component/datePicker/components/TimePanel.vue
View File

@ -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>

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

@ -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>

111
package/component/src/component/datePicker/components/components/DateContent.vue Normal file
View File

@ -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>

129
package/component/src/component/datePicker/index.vue
View File

@ -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>
<DatePanel v-if="!range && (showPanel === 'date' || showPanel === 'datetime')"></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 = () => {
getDateValue(false)
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>

1
package/component/src/component/datePicker/interface.ts
View File

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