<template>
|
<a-modal title="预览" :visible="visible" width="50%" :footer="null" @cancel="visible=false">
|
<template v-for="(item,index) in imageUrlArr">
|
<img v-if="item" :src="getImageItemUrl(item)" width="100%;"/>
|
|
<a-divider v-if="index+1<imageUrlArr.length" style="margin:20px 0;background-color: #000"></a-divider>
|
</template>
|
</a-modal>
|
</template>
|
|
<script>
|
export default {
|
name: 'ImagesPreviewModal',
|
props: {
|
imageListUrl: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
visible: false
|
}
|
},
|
computed: {
|
imageUrlArr() {
|
// 处理空值或无效JSON的情况
|
if (!this.imageListUrl || typeof this.imageListUrl !== 'string' || this.imageListUrl.trim() === '') {
|
return []
|
}
|
|
// 尝试解析JSON
|
let parsed
|
try {
|
parsed = JSON.parse(this.imageListUrl)
|
} catch (e) {
|
console.error('JSON解析错误:', e)
|
console.error('出错的JSON字符串:', this.imageListUrl)
|
return []
|
}
|
|
// 检查解析结果是否为数组
|
if (!Array.isArray(parsed)) {
|
console.warn('imageListUrl解析结果不是数组:', parsed)
|
return []
|
}
|
|
// 提取filePath并过滤无效值
|
return parsed.map(item => {
|
// 确保每个item都有filePath属性且不为空
|
return item && typeof item === 'object' && item.filePath && typeof item.filePath === 'string' ? item.filePath : ''
|
}).filter(item => item !== '') // 过滤掉空的filePath
|
}
|
},
|
methods: {
|
getImageItemUrl(imageItemSrcSuffix) {
|
if (!imageItemSrcSuffix) return ''
|
return `${window._CONFIG['domianURL']}/${imageItemSrcSuffix}`
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-modal {
|
height: 70%;
|
overflow: hidden;
|
|
.ant-modal-content {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
.ant-modal-body {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
}
|
|
</style>
|
