fix(admin): 修正日期滚动范围过小导致找不到今天的问题
上一版把扩天步长压到±3天且多选start锁死≥0,需要滚很多次才到目标日期. 调整: - 单次滚动像素: 120px → 160px (约3~4张卡片) - 初始范围: 单选 -10~+15天 / 多选 -3~+38天 (多选允许看过去3天以便对齐今日) - 无限扩天步长: ±5天 (折衷); 扩天触发阈值 50px→100px,快到边缘就提前扩 - 多选去除 Math.max(0,start) 限制,允许往过去扩展
This commit is contained in:
@@ -169,7 +169,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
|
|||||||
const dateSelector = ref(null)
|
const dateSelector = ref(null)
|
||||||
const isFirstDateVisible = ref(false)
|
const isFirstDateVisible = ref(false)
|
||||||
const isLastDateVisible = ref(false)
|
const isLastDateVisible = ref(false)
|
||||||
const dateRange = ref({ start: -8, end: 10 })
|
const dateRange = ref({ start: -10, end: 15 })
|
||||||
const showCalendar = ref(false)
|
const showCalendar = ref(false)
|
||||||
|
|
||||||
const pad = (n) => n.toString().padStart(2, '0')
|
const pad = (n) => n.toString().padStart(2, '0')
|
||||||
@@ -248,7 +248,7 @@ const scrollToDateElement = (behavior = 'smooth') => {
|
|||||||
const handleWheel = (event) => {
|
const handleWheel = (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const scrollAmount = 120
|
const scrollAmount = 160
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
const currentScroll = dateSelector.value.scrollLeft
|
||||||
dateSelector.value.scrollTo({
|
dateSelector.value.scrollTo({
|
||||||
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||||
@@ -258,7 +258,7 @@ const handleWheel = (event) => {
|
|||||||
|
|
||||||
const scrollDates = (direction) => {
|
const scrollDates = (direction) => {
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const scrollAmount = 120
|
const scrollAmount = 160
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
const currentScroll = dateSelector.value.scrollLeft
|
||||||
dateSelector.value.scrollTo({
|
dateSelector.value.scrollTo({
|
||||||
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||||
@@ -269,16 +269,16 @@ const scrollDates = (direction) => {
|
|||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
||||||
if (scrollLeft < 50) {
|
if (scrollLeft < 100) {
|
||||||
const oldScrollWidth = scrollWidth
|
const oldScrollWidth = scrollWidth
|
||||||
dateRange.value.start -= 3
|
dateRange.value.start -= 5
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const newScrollWidth = dateSelector.value.scrollWidth
|
const newScrollWidth = dateSelector.value.scrollWidth
|
||||||
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (scrollWidth - scrollLeft - clientWidth < 50) {
|
if (scrollWidth - scrollLeft - clientWidth < 100) {
|
||||||
dateRange.value.end += 3
|
dateRange.value.end += 5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -286,8 +286,8 @@ const scrollToToday = () => {
|
|||||||
const todayStr = formatDateStr(today)
|
const todayStr = formatDateStr(today)
|
||||||
if (props.modelValue !== todayStr) selectDate(todayStr)
|
if (props.modelValue !== todayStr) selectDate(todayStr)
|
||||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
||||||
dateRange.value.start = -8
|
dateRange.value.start = -10
|
||||||
dateRange.value.end = 10
|
dateRange.value.end = 15
|
||||||
}
|
}
|
||||||
nextTick(() => scrollToDateElement('smooth'))
|
nextTick(() => scrollToDateElement('smooth'))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -191,7 +191,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
|
|||||||
const dateSelector = ref(null)
|
const dateSelector = ref(null)
|
||||||
const isFirstDateVisible = ref(false)
|
const isFirstDateVisible = ref(false)
|
||||||
const isLastDateVisible = ref(false)
|
const isLastDateVisible = ref(false)
|
||||||
const dateRange = ref({ start: 0, end: 28 })
|
const dateRange = ref({ start: -3, end: 38 })
|
||||||
const showCalendar = ref(false)
|
const showCalendar = ref(false)
|
||||||
const lastClickedDate = ref('')
|
const lastClickedDate = ref('')
|
||||||
|
|
||||||
@@ -343,7 +343,7 @@ const applyBatchAction = (action) => {
|
|||||||
const handleWheel = (event) => {
|
const handleWheel = (event) => {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const scrollAmount = 120
|
const scrollAmount = 160
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
const currentScroll = dateSelector.value.scrollLeft
|
||||||
dateSelector.value.scrollTo({
|
dateSelector.value.scrollTo({
|
||||||
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||||
@@ -353,7 +353,7 @@ const handleWheel = (event) => {
|
|||||||
|
|
||||||
const scrollDates = (direction) => {
|
const scrollDates = (direction) => {
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const scrollAmount = 120
|
const scrollAmount = 160
|
||||||
const currentScroll = dateSelector.value.scrollLeft
|
const currentScroll = dateSelector.value.scrollLeft
|
||||||
dateSelector.value.scrollTo({
|
dateSelector.value.scrollTo({
|
||||||
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||||
@@ -364,23 +364,23 @@ const scrollDates = (direction) => {
|
|||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
||||||
if (scrollLeft < 50 && dateRange.value.start > 0) {
|
if (scrollLeft < 100) {
|
||||||
const oldScrollWidth = scrollWidth
|
const oldScrollWidth = scrollWidth
|
||||||
dateRange.value.start = Math.max(0, dateRange.value.start - 3)
|
dateRange.value.start -= 5
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const newScrollWidth = dateSelector.value.scrollWidth
|
const newScrollWidth = dateSelector.value.scrollWidth
|
||||||
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (scrollWidth - scrollLeft - clientWidth < 50) {
|
if (scrollWidth - scrollLeft - clientWidth < 100) {
|
||||||
dateRange.value.end += 3
|
dateRange.value.end += 5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 = 0
|
dateRange.value.start = -3
|
||||||
dateRange.value.end = 20
|
dateRange.value.end = 25
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (!dateSelector.value) return
|
if (!dateSelector.value) return
|
||||||
|
|||||||
Reference in New Issue
Block a user