fix(admin): 日期组件进入界面后应滚动到当前日期/选中项居中
AdminDatePicker: - scrollToDateElement 在 props.modelValue 为空时回退到今天 - onMounted: 空值时走 smooth(有滚动感),有值走 auto(无声定位),不再直接 return 停在最左 AdminMultiDatePicker: - 新增 scrollToDateElement 通用 + watch(modelValue) - onMounted 分两支: 有选中值时跳到首个 >= 今天的选中项 否则跳今天 - 目标超出 dateRange 时先扩 range 再滚 (避免定位不到元素)
This commit is contained in:
@@ -239,10 +239,12 @@ const selectDate = (dateValue) => {
|
|||||||
emit('change', dateValue)
|
emit('change', dateValue)
|
||||||
}
|
}
|
||||||
|
|
||||||
const scrollToDateElement = (behavior = 'smooth') => {
|
const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => {
|
||||||
if (!dateSelector.value || !props.modelValue) return
|
if (!dateSelector.value) return
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${props.modelValue}"]`)
|
const dateKey = targetDate || formatDateStr(today)
|
||||||
if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
|
||||||
|
if (!el) return
|
||||||
|
el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleWheel = (event) => {
|
const handleWheel = (event) => {
|
||||||
@@ -324,7 +326,7 @@ watch(() => props.modelValue, () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => scrollToDateElement('auto'))
|
nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth'))
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -377,17 +377,18 @@ const handleScroll = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const scrollToDateElement = (targetDate, behavior = 'smooth') => {
|
||||||
|
if (!dateSelector.value || !targetDate) return
|
||||||
|
const el = dateSelector.value.querySelector(`[data-date="${targetDate}"]`)
|
||||||
|
if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||||
|
}
|
||||||
|
|
||||||
const scrollToToday = () => {
|
const scrollToToday = () => {
|
||||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
||||||
dateRange.value.start = -3
|
dateRange.value.start = -3
|
||||||
dateRange.value.end = 25
|
dateRange.value.end = 25
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => scrollToDateElement(formatDateStr(today), 'smooth'))
|
||||||
if (!dateSelector.value) return
|
|
||||||
const todayStr = formatDateStr(today)
|
|
||||||
const el = dateSelector.value.querySelector(`[data-date="${todayStr}"]`)
|
|
||||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleCalendar = () => {
|
const toggleCalendar = () => {
|
||||||
@@ -399,8 +400,35 @@ const goToday = () => {
|
|||||||
calendarMonth.value = today.getMonth()
|
calendarMonth.value = today.getMonth()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(() => props.modelValue, (newVal) => {
|
||||||
|
if (!newVal || !newVal.length) return
|
||||||
|
nextTick(() => {
|
||||||
|
// 跳到第一个 >= 今天的日期,否则跳第一个选中项
|
||||||
|
const todayStr = formatDateStr(today)
|
||||||
|
const target = newVal.find(d => d >= todayStr) || newVal[0]
|
||||||
|
// 如果目标超出当前范围,扩展 range
|
||||||
|
const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
|
||||||
|
if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
|
||||||
|
dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
|
||||||
|
dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
|
||||||
|
}
|
||||||
|
nextTick(() => scrollToDateElement(target, 'smooth'))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
nextTick(() => scrollToToday())
|
if (props.modelValue && props.modelValue.length) {
|
||||||
|
const todayStr = formatDateStr(today)
|
||||||
|
const target = props.modelValue.find(d => d >= todayStr) || props.modelValue[0]
|
||||||
|
const diff0 = Math.round((new Date(target) - new Date(todayStr)) / 86400000)
|
||||||
|
if (diff0 < dateRange.value.start || diff0 > dateRange.value.end) {
|
||||||
|
dateRange.value.start = Math.min(dateRange.value.start, diff0 - 3)
|
||||||
|
dateRange.value.end = Math.max(dateRange.value.end, diff0 + 5)
|
||||||
|
}
|
||||||
|
nextTick(() => nextTick(() => scrollToDateElement(target, 'smooth')))
|
||||||
|
} else {
|
||||||
|
nextTick(() => scrollToToday())
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user