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)
|
||||
}
|
||||
|
||||
const scrollToDateElement = (behavior = 'smooth') => {
|
||||
if (!dateSelector.value || !props.modelValue) return
|
||||
const el = dateSelector.value.querySelector(`[data-date="${props.modelValue}"]`)
|
||||
if (el) el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||
const scrollToDateElement = (behavior = 'smooth', targetDate = props.modelValue) => {
|
||||
if (!dateSelector.value) return
|
||||
const dateKey = targetDate || formatDateStr(today)
|
||||
const el = dateSelector.value.querySelector(`[data-date="${dateKey}"]`)
|
||||
if (!el) return
|
||||
el.scrollIntoView({ behavior, block: 'nearest', inline: 'center' })
|
||||
}
|
||||
|
||||
const handleWheel = (event) => {
|
||||
@@ -324,7 +326,7 @@ watch(() => props.modelValue, () => {
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => scrollToDateElement('auto'))
|
||||
nextTick(() => scrollToDateElement(props.modelValue ? 'auto' : 'smooth'))
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user