点击按钮展示图片（ui组件el-image）

最新推荐文章于 2025-02-05 17:04:00 发布

摸鱼小扒菜

最新推荐文章于 2025-02-05 17:04:00 发布

阅读量938

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/Zz_Qdm/article/details/127275596

本文介绍了一种使用Element UI中的el-image组件实现图片预览的方法。通过设置:preview-src-list属性为图片数组，并利用按钮点击事件动态更新图片源，实现了图片预览功能。需要注意的是，在更新图片数组后必须调用$nextTick确保DOM更新完成。

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

1.html代码

  <el-image v-show="false" src="" fit="cover" ref="imga" style="width: 100%; height: 100%"
            :preview-src-list=imgSrc>
        </el-image>

2.js代码

  // 存放图片的数组
 imgSrc: []
  //点击按钮的方法
 dblclick(row) {
            this.imgSrc = []
            this.imgSrc.push("https://**************.png",
                             "https://**************.png",
                             "https://**************.png",
                             "https://**************.png",
                             "https://**************.png")
  //这里要用$nextTick() 解决第一次不生效的问题
            this.$nextTick(() => {
                this.$refs.imga.clickHandler()
            })
        },