forked from opentiny/tiny-vue
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:
parent
1a031277bb
commit
f49c868a44
|
|
@ -630,6 +630,8 @@
|
|||
@apply ~'max-w-[theme(spacing.80)]';
|
||||
|
||||
.tooltip-main{
|
||||
@apply overflow-auto;
|
||||
@apply max-h-[80vh];
|
||||
@apply p-2;
|
||||
|
||||
.title{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 }} ~
|
||||
|
|
|
|||
|
|
@ -136,6 +136,8 @@ export default defineComponent({
|
|||
component: {
|
||||
render: () => {
|
||||
let content = getContent(this)
|
||||
// 当内容为纯文本时,添加一层wrapper,其他情况(插槽、renderContent)原样输出
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue