github/basic
1
0
Fork 1
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:17:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复预览图片无法完整覆盖 el-table 固定列

Browse Source
This commit is contained in:
hooray
2022-12-19 22:15:11 +08:00
parent 73152a00ef
commit a841910406
5 changed files with 97 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImagePreview/index.vue
+1 -1
View File
@@ -24,7 +24,7 @@ const realHeight = computed(() => {
</script>
<template>
<el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
<el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
<template #error>
<div class="image-slot">
<el-icon>
src/components/ImageUpload/index.vue
+1 -1
View File
@@ -147,7 +147,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
<el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
</div>
</div>
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
</div>
</template>
src/components/ImagesUpload/index.vue
+1 -1
View File
@@ -174,7 +174,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
<el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
</div>
</div>
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
<el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
</div>
</template>
src/views/component_extend_example/image.preview.demo.vue
+43 -6
View File
@@ -3,18 +3,55 @@ meta:
enabled: false
</route>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
src: 'https://hooray.gitee.io/fantastic-admin/logo.png',
},
]
</script>
<template>
<div>
<page-header title="图片预览" content="ImagePreview" />
<page-main>
<div>
<image-preview src="https://hooray.gitee.io/fantastic-admin/logo.png" :width="200" />
</div>
<image-preview src="https://hooray.gitee.io/fantastic-admin/logo.png" :width="200" />
</page-main>
<page-main title="图片加载失败时">
<div>
<image-preview src="http://www.baidu.com" width="100px" height="100px" />
</div>
<image-preview src="http://www.baidu.com" width="100px" height="100px" />
</page-main>
<page-main title="结合 el-table 使用">
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="date" label="日期" width="180" fixed="left" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column label="图片">
<template #default="{ row }">
<image-preview :src="row.src" width="100px" height="100px" />
</template>
</el-table-column>
</el-table>
</page-main>
</div>
</template>
src/views/component_extend_example/upload.demo.vue
+51 -1
View File
@@ -7,7 +7,7 @@ meta:
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
const image = ref('https://picsum.photos/400')
const image = ref('https://picsum.photos/750/450')
const images = ref([
'https://picsum.photos/400',
'https://picsum.photos/600',
@@ -48,6 +48,41 @@ const handleSuccess3: UploadProps['onSuccess'] = (res, file, fileList) => {
ElMessage.warning(res.error)
}
}
const tableData = [
{
image: 'https://picsum.photos/750/450',
images: [
'https://picsum.photos/400',
'https://picsum.photos/600',
'https://picsum.photos/500',
],
},
{
image: 'https://picsum.photos/750/450',
images: [
'https://picsum.photos/400',
'https://picsum.photos/600',
'https://picsum.photos/500',
],
},
{
image: 'https://picsum.photos/750/450',
images: [
'https://picsum.photos/400',
'https://picsum.photos/600',
'https://picsum.photos/500',
],
},
{
image: 'https://picsum.photos/750/450',
images: [
'https://picsum.photos/400',
'https://picsum.photos/600',
'https://picsum.photos/500',
],
},
]
</script>
<template>
@@ -69,5 +104,20 @@ const handleSuccess3: UploadProps['onSuccess'] = (res, file, fileList) => {
<page-main title="文件上传（默认最多3个）">
<file-upload :files="files" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/file" @on-success="handleSuccess3" />
</page-main>
<page-main title="结合 el-table 使用">
<el-table :data="tableData" style="width: 100%;">
<el-table-column type="index" width="50" fixed="left" />
<el-table-column label="单张图片">
<template #default="{ row }">
<image-upload v-model:url="row.image" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" :width="250" :height="150" @on-success="handleSuccess1" />
</template>
</el-table-column>
<el-table-column label="多张图片">
<template #default="{ row }">
<images-upload v-model:url="row.images" action="https://console-mock.apipost.cn/app/mock/project/1f50f1da-5189-4282-d3c7-c133a514c5a8/upload/image" name="image" @on-success="handleSuccess2" />
</template>
</el-table-column>
</el-table>
</page-main>
</div>
</template>