uniapp实现头像预览功能 - vue3

使用 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>