比如说上传组件使用el-image-viewer组件去看,如果用错了,你会发现,你每次只能看一张图片
javascript
<template>
<div>
<el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList"
@change="handleChange">
上传
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
瞎看
</span>
<span class="el-upload-list__item-delete" @click="handleDownload(file)">
下载
</span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)">
删除
</span>
</span>
</div>
</template>
</el-upload>
<el-image-viewer v-if="previewVisibleRef" :url-list="srcList" :initial-index="previewIndexRef"
@close="previewVisibleRef = false" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const srcList = ref([]);
const fileList = ref([]);
const previewVisibleRef = ref(false);
const previewIndexRef = ref(0);
const carouselArr = ref([
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])
const handleChange = (file, fileList) => {
// 当上传文件改变时,更新文件列表和 srcList
fileList.value = fileList;
srcList.value.push(file.url);
};
const handlePictureCardPreview = (file) => {
// 设置预览图片的索引
previewIndexRef.value = srcList.value.indexOf(file.url);
// 显示图片预览
previewVisibleRef.value = true;
};
</script>
再比如轮播图点一张看所有图片
javascript
<template>
<div>
<el-carousel height="150px">
<el-carousel-item v-for="item in carouselArr" :key="item" @click="show(item)">
<img :src="item" alt="">
</el-carousel-item>
</el-carousel>
<el-image-viewer v-if="previewVisibleRef" :url-list="srcList" :initial-index="previewIndexRef"
@close="previewVisibleRef = false" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const srcList = ref([]);
const previewVisibleRef = ref(false);
const previewIndexRef = ref(0);
const carouselArr = ref([
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
])
function show(item) {
srcList.value = carouselArr.value
previewVisibleRef.value = true;
}
</script>
<style>
/* 样式保持不变 */
</style>
而el-image组件是单一需求,更使用单一需求和图片,总之el-image-viewer是用来看相册一类的,比较方便,官网上面的api要特别注意一下,是有区分的
el-image:如下
el-image-viewer如下:
注意使用方式