小码问答，有问必答！

ElementUI如何设置预览照片时点开显示某个照片，而不是从0开始？ 

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>
<script>
  export default {
    data() {      
    return {        
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',        
        srcList: [          
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',          
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
        </script>


WEB前端

收藏

1个回答

我要回答

  • author
    牛叔叔 2021-04-22 14:37

    可以在图片上加上一个click事件，事件中记录当前点击图片的index，然后将图片数组重新组合以这个index为起始元素的数组。


    将显示的图片列表数据改成计算属性。


    <div class="demo-image__preview">
  <el-image  v-for="url,index in srcList"
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList" @click='curPicIndex=index'>
  </el-image>
</div>
<script>
  export default {
    data() {      
    return {        
        curPicIndex:0,//记录当前点击的图片索引      
        srcList: [          
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',          
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    },
    computed:{
        piclist:function(){
            return this.srcList.slice(this.curPicIndex).concat(this.srcList.slice(0,this.curPicIndex));
        }
    }
  }
</script>


    我有问题