小码问答,有问必答!

2021-04-22 14:37

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

2021-04-22 14:37 回答了这个问题

<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>


可以在图片上加上一个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>


0条评论

我要评论

立刻咨询
免费试听
电话咨询