feat: 为图片类型字段添加 NPopover 优化图片展示体验并调整省略号逻辑

This commit is contained in:
Wei_佳 2025-11-28 16:01:01 +08:00
parent 1c493965d0
commit 81653a257d

View File

@ -9,6 +9,7 @@ import {
NImage, NImage,
NImageGroup, NImageGroup,
NDataTable, NDataTable,
NPopover,
} from 'naive-ui' } from 'naive-ui'
import { marked } from 'marked' import { marked } from 'marked'
@ -199,7 +200,7 @@ const detailSections = computed(() => {
title: field.label, title: field.label,
key: field.label, key: field.label,
width: 200, width: 200,
ellipsis: field.type === 'list' ? false : { ellipsis: ['list', 'images'].includes(field.type) ? false : {
tooltip: { tooltip: {
style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' } style: { maxWidth: '600px', maxHeight: '400px', overflow: 'auto' }
}, },
@ -217,7 +218,7 @@ const detailSections = computed(() => {
return '-' return '-'
} else if (fieldData.type === 'images') { } else if (fieldData.type === 'images') {
if (fieldData.value && fieldData.value.length) { if (fieldData.value && fieldData.value.length) {
return h(NImageGroup, {}, () => const createImages = () => h(NImageGroup, {}, () =>
fieldData.value.map(img => fieldData.value.map(img =>
h(NImage, { h(NImage, {
src: img, 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 '-' return '-'
} else { } else {