<template>
  <any-touch
    :pan-options="{ threshold: 10 }"
    :pinch-options="{ threshold: 0.1 }"
    @tap="handleTap"
    @pan="handlePan"
    @swipe="handleSwipe"
    @pinch="handlePinch"
    @press="handlePress"
    @rotate="handleRotate"
  >
    <view class="gesture-box">手势识别区域</view>
  </any-touch>
</template>
<script>
export default {
  methods: {
    // 基本点击
    handleTap(e) {
      console.log('Tap:', e)
    },

    // 平移拖拽
    handlePan(e) {
      const { displacement, deltaX, deltaY } = e
      console.log(`Pan: X=${deltaX}, Y=${deltaY}, 位移=${displacement}px`)
    },

    // 快速滑动
    handleSwipe(e) {
      const { direction } = e
      const dirMap = {
        left: '向左',
        right: '向右',
        up: '向上',
        down: '向下'
      }
      console.log(`Swipe: ${dirMap[direction]}`)
    },

    // 缩放
    handlePinch(e) {
      console.log(`缩放比例: ${e.scale.toFixed(2)}倍`)
    },

    // 长按
    handlePress(e) {
      console.log(`长按 ${e.duration}ms`)
    },

    // 旋转
    handleRotate(e) {
      console.log(`旋转角度: ${e.angle.toFixed(1)}°`)
    }
  }
}
</script>
<style>
	.gesture-box {
	  width: 300px;
	  height: 300px;
	  background-color: #f0f9ff;
	  border: 1px solid #409eff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 20px auto;
	}
</style>