From eb19dfd5c8005670bd61afadda942022944fa224 Mon Sep 17 00:00:00 2001 From: "jlj05024111@163.com" Date: Thu, 17 Jul 2025 15:07:54 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A5=E5=8E=86?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E8=87=AA=E5=AE=9A=E4=B9=89=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E5=A4=B4=E9=83=A8=E5=92=8C=E5=86=85=E5=AE=B9=E5=8C=BA=E6=9C=AA?= =?UTF-8?q?=E5=AF=B9=E9=BD=90=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 + .../calendar-user/calendar-user.scss | 32 +++- .../calendar-user/calendar-user.tsx | 168 ++++++++++++++++-- 3 files changed, 184 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 234382753..4433fb45f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,10 @@ - 优化表格属性列 +### Fixed + +- 修复日历用户自定义模式头部和内容区未对齐问题 + ## [0.7.41-alpha.12] - 2025-07-15 ### Added diff --git a/src/control/calendar/components/calendar-user/calendar-user.scss b/src/control/calendar/components/calendar-user/calendar-user.scss index 4a2a37340..cc68951fe 100644 --- a/src/control/calendar/components/calendar-user/calendar-user.scss +++ b/src/control/calendar/components/calendar-user/calendar-user.scss @@ -43,9 +43,6 @@ $calendar-user: ( @include b('calendar-user-header'){ flex-shrink: 0; - // 固定宽，这是留出的滑动条宽度，好和内容区对齐的,在web-theme包里滑动条宽度也是写死的4px宽度 - padding-right: 4px; - @include e('top'){ border-top: 1px solid getCssVar(color,tertiary); } @@ -77,10 +74,11 @@ $calendar-user: ( } } @include b('calendar-user-content'){ + position: relative; flex: 1; width: 100%; height: 100%; - overflow: auto; + overflow: hidden; @include e('time-item'){ display: flex; justify-content: space-between; @@ -100,5 +98,31 @@ $calendar-user: ( justify-content: center; overflow: hidden; } + @include e('wrapping'){ + width: 100%; + height: 100%; + overflow: auto; + + &::-webkit-scrollbar { + display: none; + } + } + + } +} +@include b('calendar-user-scroll-bar'){ + position: absolute; + top: getCssVar(calendar-user-scroll-bar,thumb-top); + right: 0; + z-index: 10; + width: 4px; + height: 100%; + border-radius: getCssVar(border-radius,extra-small); + @include e('thumb'){ + width: 4px; + height: getCssVar(calendar-user-scroll-bar,thumb-height); + cursor: pointer; + background-color: lightgray; + border-radius: getCssVar(border-radius,extra-small); } } \ No newline at end of file diff --git a/src/control/calendar/components/calendar-user/calendar-user.tsx b/src/control/calendar/components/calendar-user/calendar-user.tsx index 69e3de521..40dfca076 100644 --- a/src/control/calendar/components/calendar-user/calendar-user.tsx +++ b/src/control/calendar/components/calendar-user/calendar-user.tsx @@ -27,6 +27,24 @@ export const CalendarUser = defineComponent({ // 气泡框 const curPopover = ref(); + // 滚动容器 + const scrollContainerRef = ref(); + + // 滚动高度 + const scrollTop = ref(0); + // 滚动条滑块的高度 + const thumbHeight = ref(0); + // 是否允许滚动 + const enableScroll = ref(false); + // 上一次的鼠标位置 + const orginY = ref(0); + // 内容实际高度 + const realHeight = ref(1); + // 实际可视高度 + const visibleHeight = ref(1); + // 是否出现滚动条 + const isScroll = ref(false); + // 监听日期变化，重新计算本周时间 watch( () => props.selectedDay, @@ -134,30 +152,148 @@ export const CalendarUser = defineComponent({ ); }; + /** + * 鼠标滚动 + * + * @param {MouseEvent} event + */ + const onMouseMove = (event: MouseEvent) => { + if (enableScroll.value) { + const y = event.clientY - orginY.value; + // 计算滚动条位置 + scrollTop.value += y; + orginY.value = event.clientY; + // 计算实际内容滚动位置 + if (scrollContainerRef.value) { + scrollContainerRef.value.scrollTop = + realHeight.value * (scrollTop.value / visibleHeight.value); + } + } + event.preventDefault(); + event.stopPropagation(); + }; + + /** + * 鼠标放起 + * + * @param {MouseEvent} event + */ + const onMouseUp = (event: MouseEvent) => { + enableScroll.value = false; + event.preventDefault(); + event.stopPropagation(); + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + + /** + * 鼠标按下 + * + * @param {MouseEvent} event + */ + const onMouseDown = (event: MouseEvent) => { + orginY.value = event.clientY; + enableScroll.value = true; + event.preventDefault(); + event.stopPropagation(); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + }; + + /** + * 绘制虚拟滚动条 + * + */ + const renderScrollbar = () => { + return ( +
+
+
+ ); + }; + + /** + * 滚动方法 + * + * @param {Event} event + */ + const onScroll = (event: Event) => { + // 滚动的高度 + const realTop = (event.target as IData)?.scrollTop || 0; + // 总体的内容高度 + realHeight.value = (event.target as IData)?.scrollHeight; + // 可视高度 + visibleHeight.value = (event.target as IData)?.clientHeight; + // 滚动比例 + const realRatio = realTop / realHeight.value; + // 滚动条应该滚动高度 + scrollTop.value = realRatio * visibleHeight.value; + }; + // 绘制内容 const renderWeekContent = () => { return ( -
- {timeList.value.map(item => { - return ( -
-
- {item.text} +
+
{ + scrollContainerRef.value = el; + }} + onScroll={onScroll} + > + {timeList.value.map(item => { + return ( +
+
+ {item.text} +
+ {weekday.value.map(day => { + return ( +
+ {renderEvent(day, item)} +
+ ); + })}
- {weekday.value.map(day => { - return ( -
- {renderEvent(day, item)} -
- ); - })} -
- ); - })} + ); + })} +
+ {isScroll.value && renderScrollbar()}
); }; + watch( + () => scrollContainerRef.value, + () => { + if (scrollContainerRef.value) { + realHeight.value = scrollContainerRef.value.scrollHeight; + visibleHeight.value = scrollContainerRef.value.clientHeight; + + if (realHeight.value > visibleHeight.value) { + isScroll.value = true; + } + thumbHeight.value = + visibleHeight.value * (visibleHeight.value / realHeight.value); + } + }, + { + immediate: true, + deep: true, + }, + ); + return { ns, renderWeekHeader, renderWeekContent }; }, render() { -- Gitee