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

比如说上传组件使用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如下:

注意使用方式

相关推荐
百万蹄蹄向前冲1 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5812 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路2 小时前
GeoTools 读取影像元数据
前端
ssshooter3 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
你的人类朋友3 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
Jerry3 小时前
Jetpack Compose 中的状态
前端
dae bal4 小时前
关于RSA和AES加密
前端·vue.js
柳杉4 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog4 小时前
低端设备加载webp ANR
前端·算法
LKAI.5 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi