style(图表): 优化图表标题备注在移动端的显示长度

This commit is contained in:
jianneng-fit2cloud 2024-11-01 22:50:56 +08:00
parent c998c3d288
commit 904de23533

View File

@ -917,6 +917,18 @@ const loadPluginCategory = data => {
const allEmptyCheck = computed(() => {
return ['rich-text', 'picture-group'].includes(element.value.innerType)
})
/**
* 标题提示的最大宽度
*/
const titleTooltipWidth = computed(() => {
if (inMobile.value) {
return `${screen.width - 10}px`
}
if (mobileInPc.value) {
return '270px'
}
return '500px'
})
</script>
<template>
@ -959,12 +971,12 @@ const allEmptyCheck = computed(() => {
<el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
<template #content>
<div
style="
width: 500px;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
"
:style="{
maxWidth: titleTooltipWidth,
wordBreak: 'break-all',
wordWrap: 'break-word',
whiteSpace: 'pre-wrap'
}"
v-html="state.title_remark.remark"
></div>
</template>