69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<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> |