fix(calendar-view): [calendar-view] increase the maximum height and overflow handling of calendar-view tooltip content to optimize display effect (#3196)

* fix(calendar-view): [calendar-view] increase the maximum height and overflow handling of calendar-view tooltip content to optimize display effect

* fix(calendar-view): 调整日历视图工具提示内容的最大高度和溢出处理,以优化显示效果
This commit is contained in:
ajaxzheng 2025-03-26 18:00:50 +08:00 committed by GitHub
parent 1a031277bb
commit f49c868a44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 15 additions and 2 deletions

View File

@ -630,6 +630,8 @@
@apply ~'max-w-[theme(spacing.80)]';
.tooltip-main{
@apply overflow-auto;
@apply max-h-[80vh];
@apply p-2;
.title{

View File

@ -630,12 +630,17 @@
.inject-CalendarView-vars();
position: absolute;
max-width: 320px;
.tooltip-main {
overflow: auto;
max-height: 80vh;
padding: var(--tv-CalendarView-tooltip-title-font-size);
.title {
font-size: var(--tv-CalendarView-tooltip-title-font-size);
font-weight: var(--tv-CalendarView-tooltip-title-font-weight);
}
.date {
margin: 6px 0;
color: var(--tv-CalendarView-tooltip-date-text-color);

View File

@ -9,7 +9,7 @@
placement="right"
>
<template #content>
<div class="p-2">
<div class="p-2 max-h-[80vh] overflow-auto">
<div class="px-1.5 mb-1.5 border-l-2 border-color-brand">{{ state.eventTipContent.title }}</div>
<div class="mb-1.5 px-2 text-color-text-placeholder">
{{ state.eventTipContent.startDay }} {{ state.eventTipContent.startTime }} ~

View File

@ -136,6 +136,8 @@ export default defineComponent({
component: {
render: () => {
let content = getContent(this)
// wrapperrenderContent
const addWrapper = typeof content === 'string'
let propsData = { on: { 'after-leave': this.doDestroy } }
let mouseenter = () => this.setExpectedState(true)
let mouseleave = () => {
@ -163,7 +165,11 @@ export default defineComponent({
aria-hidden={this.disabled || !this.state.showPopper ? 'true' : 'false'}
onMouseenter={() => mouseenter()}
onMouseleave={() => mouseleave()}>
<div style={`overflow:auto; max-height:${this.contentMaxHeight}`}>{content}</div>
{addWrapper ? (
<div style={`overflow:auto;max-height:${this.contentMaxHeight}`}>{content}</div>
) : (
content
)}
{this.visibleArrow ? (
<div
x-arrow