Merge pull request #13075 from dataease/pr@dev-v2@chart-title-style

style(图表): 优化图表标题备注在移动端的显示长度
This commit is contained in:
jianneng-fit2cloud 2024-11-01 22:51:50 +08:00 committed by GitHub
commit d0e9ef9973
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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>