feat:任务大纲卡片超出3行提示框设置最大宽度
This commit is contained in:
@@ -1,5 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-tooltip :disabled="!isOverflow" effect="light" placement="top" :content="text">
|
<el-tooltip
|
||||||
|
:disabled="!isOverflow"
|
||||||
|
effect="light"
|
||||||
|
placement="top"
|
||||||
|
:content="text"
|
||||||
|
popper-class="multi-line-tooltip-popper"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
ref="containerRef"
|
ref="containerRef"
|
||||||
class="multi-line-ellipsis"
|
class="multi-line-ellipsis"
|
||||||
@@ -28,7 +34,7 @@ interface Props {
|
|||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
text: '',
|
text: '',
|
||||||
lines: 3,
|
lines: 3,
|
||||||
maxWidth: '100%',
|
maxWidth: '100%'
|
||||||
})
|
})
|
||||||
|
|
||||||
const isOverflow = ref(false)
|
const isOverflow = ref(false)
|
||||||
@@ -45,8 +51,8 @@ const containerStyle = computed(
|
|||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
lineHeight: '1.5',
|
lineHeight: '1.5',
|
||||||
wordBreak: 'break-all',
|
wordBreak: 'break-all'
|
||||||
}) as HTMLAttributes['style'],
|
} as HTMLAttributes['style'])
|
||||||
)
|
)
|
||||||
|
|
||||||
// 检查文字是否溢出
|
// 检查文字是否溢出
|
||||||
@@ -91,3 +97,9 @@ onMounted(() => {
|
|||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.multi-line-tooltip-popper {
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user