<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>
vue中点击图片显示更多
最新推荐文章于 2024-05-16 13:17:22 发布