elment-ui 走马灯图片显示问题-解决篇

最新推荐文章于 2025-04-02 10:46:55 发布

卑微小杜比

最新推荐文章于 2025-04-02 10:46:55 发布

阅读量2.2k

点赞数

分类专栏：自己的笔记文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_42000850/article/details/123637198

版权

自己的笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何通过Vue的el-dialog和el-carousel组件配合，实现在弹出的对话框中根据用户点击动态切换预览图片。通过修改carousel的activeIndex属性，实现了图片的个性化显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-dialog :visible.sync="dialogVisible"  class="picture">                      
                                <el-carousel height="500px" :initial-index="0" :autoplay = "false" @change="sildeImg" ref="carousel">
                                    <el-carousel-item v-for="(item,index) in pictureList" :key="index" >
                                        <img width="100%" :src="item.url" alt="" height="500px">
                                    </el-carousel-item>
                                </el-carousel>
                            </el-dialog>

picturePreview: function(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                    var currentIndex;
                    for (let i = 0; i <totalIndex ; i++) {
                        if(file.url == this.pictureList[i].url){
                            currentIndex = i ;
                        }
                    }
                    if(this.$refs['carousel']){this.$refs['carousel'].activeIndex = currentIndex;}                  
                },