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.
107 lines
2.2 KiB
107 lines
2.2 KiB
<template>
|
|
<v-uni-movable-area
|
|
class="image-view-area"
|
|
@touchstart.native="onTouchStart"
|
|
@touchmove.native="checkDirection"
|
|
@touchend.native="onTouchEnd"
|
|
>
|
|
<v-uni-movable-view
|
|
class="image-view-view"
|
|
:direction="direction"
|
|
inertia
|
|
scale
|
|
scale-min="1"
|
|
scale-max="4"
|
|
@scale="onScale"
|
|
>
|
|
<img
|
|
:src="src"
|
|
class="image-view-img"
|
|
@load="onImgLoad"
|
|
>
|
|
</v-uni-movable-view>
|
|
</v-uni-movable-area>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ImageView',
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
direction: 'none'
|
|
}
|
|
},
|
|
created () {
|
|
this.scale = 1
|
|
this.imgWidth = 0
|
|
this.imgHeight = 0
|
|
this.width = 0
|
|
this.height = 0
|
|
},
|
|
methods: {
|
|
onScale ({ detail: { scale } }) {
|
|
this.scale = scale
|
|
},
|
|
onImgLoad (event) {
|
|
const target = event.target
|
|
const rect = target.getBoundingClientRect()
|
|
this.imgWidth = rect.width
|
|
this.imgHeight = rect.height
|
|
},
|
|
onTouchStart (event) {
|
|
const $el = this.$el
|
|
const rect = $el.getBoundingClientRect()
|
|
this.width = rect.width
|
|
this.height = rect.height
|
|
this.checkDirection(event)
|
|
},
|
|
onTouchEnd (event) {
|
|
const scale = this.scale
|
|
const horizontal = scale * this.imgWidth > this.width
|
|
const vertical = scale * this.imgHeight > this.height
|
|
if (horizontal && vertical) {
|
|
this.direction = 'all'
|
|
} else if (horizontal) {
|
|
this.direction = 'horizontal'
|
|
} else if (vertical) {
|
|
this.direction = 'vertical'
|
|
} else {
|
|
this.direction = 'none'
|
|
}
|
|
this.checkDirection(event)
|
|
},
|
|
checkDirection (event) {
|
|
// 避免水平滑动和 swiper 冲突
|
|
const direction = this.direction
|
|
if (direction === 'all' || direction === 'horizontal') {
|
|
event.stopPropagation()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.image-view-area,
|
|
.image-view-view {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.image-view-img {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
|