<template>
|
<view class="img" :class="{ 'img--open': opacity === 1 }" :style="{ opacity: opacity, zIndex: zindex }" @click="close">
|
<view class="img_content" @click.stop>
|
<view class="img_content_tu">
|
<image
|
v-if="imgList.length > 1"
|
class="arrow"
|
src="@/static/ic_left@2x.png"
|
mode="widthFix"
|
@click="prev"></image>
|
<view class="img_content_tu_nr">
|
<swiper
|
style="width: 100%; height: 100%;"
|
@change="handlechange"
|
:current="mycurrent"
|
:indicator-dots="imgList.length > 1"
|
indicator-color="rgba(255,255,255,0.35)"
|
indicator-active-color="#ffffff"
|
:circular="imgList.length > 1"
|
:duration="300">
|
<swiper-item v-for="(item, index) in imgList" :key="index">
|
<view class="swiper-item">
|
<image :src="item" class="preview-image" mode="aspectFit" />
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
<image
|
v-if="imgList.length > 1"
|
class="arrow"
|
src="@/static/ic_right@2x.png"
|
mode="widthFix"
|
@click="next"></image>
|
</view>
|
<view class="img_content_close" @click="close">
|
<image src="@/static/ic_close@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
opacity: 0,
|
zindex: '-1',
|
mycurrent: 0
|
}
|
},
|
props: {
|
imgList: {
|
type: Array,
|
default: () => []
|
}
|
},
|
methods: {
|
next() {
|
if (this.imgList.length <= 1) return
|
this.mycurrent = (this.mycurrent + 1) % this.imgList.length
|
},
|
prev() {
|
if (this.imgList.length <= 1) return
|
this.mycurrent = (this.mycurrent - 1 + this.imgList.length) % this.imgList.length
|
},
|
handlechange(e) {
|
this.mycurrent = e.detail.current
|
},
|
open(i) {
|
this.mycurrent = i || 0
|
this.zindex = 9999
|
this.opacity = 1
|
},
|
close() {
|
this.zindex = '-1'
|
this.opacity = 0
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.img {
|
width: 100vw;
|
height: 100vh;
|
background: rgba(0, 0, 0, 0.65);
|
position: fixed;
|
transition: opacity 0.2s;
|
top: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
pointer-events: none;
|
|
&.img--open {
|
pointer-events: auto;
|
}
|
|
.img_content {
|
display: flex;
|
flex-direction: column;
|
pointer-events: auto;
|
|
.img_content_tu {
|
display: flex;
|
align-items: center;
|
|
.img_content_tu_nr {
|
width: 600px;
|
height: 600px;
|
padding: 24px;
|
box-sizing: border-box;
|
background: rgba(255, 255, 255, 0.95);
|
border-radius: 8px;
|
margin: 0 24px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.arrow {
|
width: 64px;
|
height: 64px;
|
flex-shrink: 0;
|
cursor: pointer;
|
}
|
}
|
|
.img_content_close {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 32px;
|
cursor: pointer;
|
|
image {
|
width: 56px;
|
height: 56px;
|
}
|
}
|
}
|
}
|
</style>
|
