使用 uniApp+vue3 实现头像预览
需求:点击头像可预览、拖动及双击放大,单击关闭
效果图:
实现代码(完整版):
<template>
<view>
<view class="my_head_portrait" @click.stop="handlePreview('https://lupic.cdn.bcebos.com/20210629/9911696_14.jpg')">
<image src="https://lupic.cdn.bcebos.com/20210629/9911696_14.jpg"/>
</view>
<!-- 头像预览 -->
<movable-area v-if="previewDate.preview" scale-area class="movable-area" >
<movable-view class="movable-view" direction="all" scale="true"
scale-min="1" scale-max="4" :scale-value="previewDate.scale"
@touchend="maskTouchend"
@touchstart="maskTouchstart">
<image style="width:100%; height: 50%;" :src="previewDate.current"> </image>
</movable-view>
</movable-area>
</view>
</template>
<script setup>
import { ref } from 'vue'
// 图片预览
const previewDate =ref({
scale:1,
current:'',
preview:false,
touchNum : 0,
startData:{
pageX: '',
pageY: ''
},
})
const handlePreview =(url) => {
previewDate.value.scale = 1;
if (url) {
previewDate.value.preview = true;
previewDate.value.current=url
}
}
const maskTouchstart =(e) => {
previewDate.value.startData.pageX= e.changedTouches[0].pageX
previewDate.value.startData.pageY= e.changedTouches[0].pageY
}
const maskTouchend =(e) => {
previewDate.value.touchNum ++
let subX = e.changedTouches[0].pageX - previewDate.value.startData.pageX
let subY = e.changedTouches[0].pageY - previewDate.value.startData.pageY
setTimeout(()=>{
//单击关闭
if(previewDate.value.touchNum == 1){
if(subX==0 && subY==0){
previewDate.value.preview = false;
}
}
//双击事件放大缩小
if(previewDate.value.touchNum >= 2){
if (previewDate.value.scale == 4) {
previewDate.value.scale = 1;
} else {
previewDate.value.scale = 4;
}
}
previewDate.value.touchNum = 0
},300)
}
</script>
<style lang='scss'>
.movable-area {
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: #4e4e4e;
}
.movable-view {
width: 100vw;
height: 100vh;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: -webkit-flex;
image{
border-radius: 0% !important;
}
}
</style>