vue点击图片放大

梦翼横空

已于 2024-02-26 13:24:38 修改

阅读量636

点赞数 4

文章标签： javascript 前端 vue.js

于 2024-02-26 13:23:55 首次发布

本文链接：https://blog.csdn.net/shichunlai18/article/details/136296978

版权

该篇文章介绍了如何在Vue应用中创建一个图片列表，通过点击预览大图，同时过滤掉非图片文件，并使用el-image-viewer组件进行显示和隐藏操作。

摘要由CSDN通过智能技术生成

<template>

<ul class="stagthole">
    <li v-for="(item,index) in file_list" :key="index">
        <img @click="bigImg(file_list,item.file_url)" :src="item.file_url" alt="" v-if="item.houz=='png'||item.houz=='jpg'||item.houz=='gif'">
        <template v-if="item.houz=='png'||item.houz=='jpg'||item.houz=='gif'">
            <h6 class="onelinehide" @click="bigImg(file_list,item.file_url)">{{item.file_name}}</h6>
        </template>
        <template v-else>
            <h6 class="onelinehide">{{item.file_name}}</h6>
        </template>
    </li>

</ul>

    <div class="viewer">
        <el-image-viewer v-if="image_big"
        @close="gbimg()"
        :initialIndex="initialIndex"
        :url-list="srcList"/>
    </div>

</template>


export default {
    data() {
        return {
            srcList:[],//放大的图片列表
            file_list:[],
            image_big:false,//是否显示
            initialIndex:0,//当前图片索引
            
        }
    },


    methods:{
    
        bigImg(url_arr,url) {//显示
            this.srcList = []
            this.initialIndex = 0
            if(url_arr){
                //因为我的列表里，有非图片的记录，所有要把非图片的记录过滤掉
                url_arr.forEach((item)=>{
                    if(!item.houz){
                        var filename = item.file_name;
                        var index = filename.lastIndexOf(".");
                        var suffix = filename.substr(index+1);
                        item.houz = suffix
                    }
                    if(item.houz=='png'||item.houz=='jpg'||item.houz=='gif'){

                        this.srcList.push(item.file_url)
                    }
                })
                this.srcList.forEach((item,index)=>{
                    if(item == url){
                        this.initialIndex = index
                    }
                })

            }
            this.image_big = true
        },
        gbimg(){//隐藏
            this.image_big = false
            this.srcList = []
        },

    },

}