vue中点击图片显示更多_vue3 :preview-src-list

<template>
  <div class="demo-image__preview">
    <div  class="box">
       <el-image 
v-for="(item, index) in srcList" :key="index"
    style="width: 100px; height: 100px"
    :src="srcList[index]" 
     :preview-src-list="srcList"
    >
  
  </el-image>
    <p v-if="isShow" @click="up">显示更多</p>
    <p v-else @click="down"> 收起</p>
    </div>
 
</div>
</template>
<script>
  export default {
    data() {
      return {
        isShow:true,
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
           'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
             'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        ],
        sliceList:[]
      }
    },
    methods:{
        //展开
        up(){
          console.log(this.sliceList);
          this.sliceList.map(item=>{
 
            this.srcList.push(item)
          })
          this.isShow=false
        },
        down(){
            console.log(this.srcList);
             this.srcList=[...this.srcList.slice(0,3)]
             this.isShow=true
        }
    },
    mounted(){
      console.log(this.srcList);
      if(this.srcList.length>3){
        this.srcList.slice(2, this.srcList.length-1)
        console.log(  this.srcList.slice(3, this.srcList.length));
        this.sliceList=[...this.srcList.slice(3, this.srcList.length)]
        console.log(this.srcList.slice(0,3));
        this.srcList=[...this.srcList.slice(0,3)]
     
      }
    },
 
  }
</script>
 
 
 
<style>
.box{
  width: 300px;
  
}
</style>