perf(admin): 调小日期滚动条的滚动跨度,避免一次飞太远
- 滚轮/左右箭头: 单次滚动量 200px -> 120px (约2~3个日期卡片) - 横向条初始长度: 单选 31天(-15~+15)->19天(-8~+10) / 多选 46天(0~45)->29天(0~28) - 无限扩展步长: 碰到边缘一次+7天 -> +3天(多选额外做了 Math.max(0,start) 防越界) - 回到今日重置范围 / 快捷选期外扩范围 一并调小
This commit is contained in:
@@ -191,7 +191,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
|
||||
const dateSelector = ref(null)
|
||||
const isFirstDateVisible = ref(false)
|
||||
const isLastDateVisible = ref(false)
|
||||
const dateRange = ref({ start: 0, end: 45 })
|
||||
const dateRange = ref({ start: 0, end: 28 })
|
||||
const showCalendar = ref(false)
|
||||
const lastClickedDate = ref('')
|
||||
|
||||
@@ -343,7 +343,7 @@ const applyBatchAction = (action) => {
|
||||
const handleWheel = (event) => {
|
||||
event.preventDefault()
|
||||
if (!dateSelector.value) return
|
||||
const scrollAmount = 200
|
||||
const scrollAmount = 120
|
||||
const currentScroll = dateSelector.value.scrollLeft
|
||||
dateSelector.value.scrollTo({
|
||||
left: event.deltaY > 0 ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||
@@ -353,7 +353,7 @@ const handleWheel = (event) => {
|
||||
|
||||
const scrollDates = (direction) => {
|
||||
if (!dateSelector.value) return
|
||||
const scrollAmount = 200
|
||||
const scrollAmount = 120
|
||||
const currentScroll = dateSelector.value.scrollLeft
|
||||
dateSelector.value.scrollTo({
|
||||
left: direction === 'right' ? currentScroll + scrollAmount : currentScroll - scrollAmount,
|
||||
@@ -364,23 +364,23 @@ const scrollDates = (direction) => {
|
||||
const handleScroll = () => {
|
||||
if (!dateSelector.value) return
|
||||
const { scrollLeft, scrollWidth, clientWidth } = dateSelector.value
|
||||
if (scrollLeft < 50) {
|
||||
if (scrollLeft < 50 && dateRange.value.start > 0) {
|
||||
const oldScrollWidth = scrollWidth
|
||||
dateRange.value.start -= 7
|
||||
dateRange.value.start = Math.max(0, dateRange.value.start - 3)
|
||||
nextTick(() => {
|
||||
const newScrollWidth = dateSelector.value.scrollWidth
|
||||
dateSelector.value.scrollLeft += newScrollWidth - oldScrollWidth
|
||||
})
|
||||
}
|
||||
if (scrollWidth - scrollLeft - clientWidth < 50) {
|
||||
dateRange.value.end += 7
|
||||
dateRange.value.end += 3
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToToday = () => {
|
||||
if (dateRange.value.start > 0 || dateRange.value.end < 0) {
|
||||
dateRange.value.start = 0
|
||||
dateRange.value.end = 30
|
||||
dateRange.value.end = 20
|
||||
}
|
||||
nextTick(() => {
|
||||
if (!dateSelector.value) return
|
||||
|
||||
Reference in New Issue
Block a user