feat: 为图片类型字段添加 NPopover 优化图片展示体验并调整省略号逻辑
This commit is contained in:
parent
1c493965d0
commit
81653a257d
@ -9,6 +9,7 @@ import {
|
||||
NImage,
|
||||
NImageGroup,
|
||||
NDataTable,
|
||||
NPopover,
|
||||
} from 'naive-ui'
|
||||
import { marked } from 'marked'
|
||||
|
||||
@ -199,7 +200,7 @@ const detailSections = computed(() => {
|
||||
title: field.label,
|
||||
key: field.label,
|
||||
width: 200,
|
||||
ellipsis: field.type === 'list' ? false : {
|
||||
ellipsis: ['list', 'images'].includes(field.type) ? false : {
|
||||
tooltip: {
|
||||
style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' }
|
||||
},
|
||||
@ -217,7 +218,7 @@ const detailSections = computed(() => {
|
||||
return '-'
|
||||
} else if (fieldData.type === 'images') {
|
||||
if (fieldData.value && fieldData.value.length) {
|
||||
return h(NImageGroup, {}, () =>
|
||||
const createImages = () => h(NImageGroup, {}, () =>
|
||||
fieldData.value.map(img =>
|
||||
h(NImage, {
|
||||
src: img,
|
||||
@ -228,6 +229,16 @@ const detailSections = computed(() => {
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
return h(NPopover, {
|
||||
trigger: 'hover',
|
||||
displayDirective: 'show',
|
||||
keepAliveOnHover: true,
|
||||
style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' }
|
||||
}, {
|
||||
trigger: () => h('div', { style: 'display: flex; overflow: hidden;' }, createImages()),
|
||||
default: () => createImages()
|
||||
})
|
||||
}
|
||||
return '-'
|
||||
} else {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user