当前位置：首页 > article >正文

element ui中el-image组件查看图片的坑

article 2024/10/30 19:14:56

比如说上传组件使用el-image-viewer组件去看，如果用错了，你会发现，你每次只能看一张图片

<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>

再比如轮播图点一张看所有图片

<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：如下