You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.6 KiB
87 lines
1.6 KiB
3 years ago
|
<template>
|
||
|
|
<div
|
||
|
|
class="uni-system-preview-image"
|
||
|
|
@click="_click"
|
||
|
|
>
|
||
|
|
<v-uni-swiper
|
||
|
|
:current.sync="index"
|
||
|
|
:indicator-dots="false"
|
||
|
|
:autoplay="false"
|
||
|
|
class="uni-system-preview-image-swiper"
|
||
|
|
>
|
||
|
|
<v-uni-swiper-item
|
||
|
|
v-for="(src,key) in urls"
|
||
|
|
:key="key"
|
||
|
|
>
|
||
|
|
<image-view :src="src" />
|
||
|
|
</v-uni-swiper-item>
|
||
|
|
</v-uni-swiper>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import imageView from './image-view'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'SystemPreviewImage',
|
||
|
|
components: {
|
||
|
|
imageView
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
const {
|
||
|
|
urls,
|
||
|
|
current
|
||
|
|
} = this.$route.params
|
||
|
|
return {
|
||
|
|
urls: urls || [],
|
||
|
|
current,
|
||
|
|
index: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created () {
|
||
|
|
const index = typeof this.current === 'number' ? this.current : this.urls.indexOf(this.current)
|
||
|
|
this.index = index < 0 ? 0 : index
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
const MAX_MOVE = 20
|
||
|
|
let x = 0
|
||
|
|
let y = 0
|
||
|
|
this.$el.addEventListener('mousedown', (event) => {
|
||
|
|
this.preventDefault = false
|
||
|
|
x = event.clientX
|
||
|
|
y = event.clientY
|
||
|
|
})
|
||
|
|
this.$el.addEventListener('mouseup', (event) => {
|
||
|
|
if (Math.abs(event.clientX - x) > MAX_MOVE || Math.abs(event.clientY - y) > MAX_MOVE) {
|
||
|
|
this.preventDefault = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
_click () {
|
||
|
|
if (!this.preventDefault) {
|
||
|
|
getApp().$router.back()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.uni-system-preview-image {
|
||
|
|
display: block;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: black;
|
||
|
|
}
|
||
|
|
.uni-system-preview-image-swiper {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|