elment-ui el-image 设置initial-index失效导致无法改变图片预览顺序

cw_csdn

于 2023-05-05 17:49:47 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/cw_csdn/article/details/130512093

该段代码展示了在Vue中使用el-image组件实现图片预览的功能。通过ref和getPreviewImages方法处理预览源列表，根据传入的index动态调整图片顺序。getPreviewImages函数利用splice操作数组，将当前索引的图片移到预览列表首位。

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

    <div>
        <el-image
          ref="imageEnlargeRef"
          style="width: 1px; height: 1px; position: absolute; opacity: 0"
          :src="url"
          :preview-src-list="getPreviewImages(3)"
        ></el-image>
     </div>



    getPreviewImages(index) {
      var imgList = [...this.srcList]
      console.log(index, 'imgList')
      if (index === 0) return imgList
      var start = imgList.splice(index)
      var remain = imgList.splice(0, index)
      console.log('start.concat(remain)', index)
      return start.concat(remain)
    }