PictureView
图片查看器,支持左右滑动切换。
依赖
Swiper
示例
<div class="pic-box">
<span v-for="(item, index) in picBox" @click="setPicShow(index)">
<img :src="item">
</span>
</div>
<nut-pictureview
:visible.sync="picShow"
:bgColor="coverColor"
:imgArr="picBox"
:initNum="picShowNum"
:pagination="showPage"
@close-pic="closeDo"
></nut-pictureview>
export default {
data(){
return{
picShow:false,
picShowNum:1,
showPage:true,
coverColor:'rgba(0,0,0,.7)',
picBox:['http://img10.360buyimg.com/n1/s368x368_jfs/t15451/283/338246331/345534/6b69d792/5a2a07c2N38f87e33.jpg',
'http://img10.360buyimg.com/n1/s368x368_jfs/t2590/194/2825053760/121163/21a0bec9/577335b9N8990670f.jpg',
'http://misc.360buyimg.com/mtd/pc/common/img/no_login.jpg'],
}
},
methods:{
setPicShow(index){
this.picShowNum = index+1;
this.picShow = true;
},
closeDo(){
console.log('关闭了')
}
}
}
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|
visible | 初始状态显示或隐藏大图 | Boolean | false | true/false |
bgColor | 设置黑色遮罩层透明度 | String | rgba(0,0,0,.5) | — |
imgArr | 大图数组 | Array | [ ] | — |
initNum | 显示大图时初始显示第几个 | Number | 1 | — |
pagination | 显示大图是是否显示点点点 | Boolean | false | — |
Events
事件名 | 说明 | 回调参数 |
---|
close-pic | 点击关闭大图时触发 | — |