1.效果展示
瞎封装组件系列:
VUE类似淘宝选择商品多规格组件
VUE简单提示框
VUE树形图(递归实现)
VUE多店铺购物车
2.使用方法
<template>
<div class="ui-pane">
<ui-header headertit="tips"></ui-header>
<div class="ui-content">
<arealine linetit="图片弹出列表"></arealine>
//v-for生成图片缩略图
<div class="img_box">
<div v-for="(item,index) in imglist" @click="imgClick(index)">
<img :src="item" />
</div>
</div>
//组件
<imglist v-if="imglistmodalisshow" :index="crtIndex" :imglist="imglist" @closeMolde="closeMolde"></imglist>
</div>
</div>
</template>
<script>
import imglist from '../../../../components/ghViewImgList/viewimglist.vue'
export default {
data() {
return {
imglist: [
'http://p1.music.126.net/gWTBbLJfla0LT74mwDildA==/109951165477221000.jpg?imageView&quality=89',
'http://p1.music.126.net/EZCbqP87wGuZ5XcECFRqxg==/109951165477895371.jpg?imageView&quality=89',
'http://p1.music.126.net/H6sKYEA8-xhhBb8yRkcioA==/109951165477267723.jpg?imageView&quality=89',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1789379040,3595596079&fm=26&gp=0.jpg'
],//图片路径数组
imglistmodalisshow:false,//弹出显示
crtIndex:0//点击图片下标
}
},
components:{
imglist
},
methods:{
imgClick(index){
this.imglistmodalisshow = true;
this.crtIndex = index;
},
closeMolde(){
this.imglistmodalisshow = false;
}
}
}
</script>
<style scoped="scoped">
.img_box{
display: flex;
flex-wrap: wrap;
margin: .3rem .25rem;
}
.img_box>div{
width: 3rem;
height: 3rem;
padding: 2px;
overflow: hidden;
}
.img_box>div img{
display: block;
height: 100%;
}
</style>
3.代码实现
<template>
<div class="ui-shade imglistshade" @click.self="close">
<swiper :options="swiperOption">
<swiper-slide v-for="item in imglist" :key="item.id">
<img :src="item" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
pagination: '.swiper-pagination',
speed: 500
},
}
},
props:{
imglist:{
type:Array,
required:true
},
index:{
type:Number,
default:3
}
},
created() {
this.swiperOption.initialSlide = this.index;
},
methods: {
close(){
this.$emit("closeMolde",false)
}
}
}
</script>
<style>
.imglistshade img{
width: 100%;
display: block;
}
.ui-shade{
background: rgba(0,0,0,.9);
}
.imglistshade .swiper-pagination-bullet-active{
background: #fff !important;
}
.imglistshade .swiper-pagination.swiper-pagination-bullets{
position: fixed;
bottom: .5rem;
}
.imglistshade .swiper-pagination-bullet{
width: 4px;
height: 4px;
}
.imglistshade .swiper-slide{
display: flex;
align-items: center;
}
.imglistshade .swiper-container{
display: flex;
align-items: center;
}
.imglistshade .swiper-container{
overflow: visible;
width: 100%;
height: 2rem;
}
</style>