feat: 为图片类型字段添加 NPopover 优化图片展示体验并调整省略号逻辑
This commit is contained in:
parent
1c493965d0
commit
81653a257d
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user