euv-gesture

vue-gesture

Support gesture for vue component. Refer to rc-gesture.

Features

Install

npm install --save euv-gesture

Usage

<template>
    <Gesture
        @onTap="onTap($event)"
    >
        <div>container</div>
    </Gesture>
</template>
<script>
import Gesture from 'euv-gesture'
export default {
    methods: {
        onTap(gestureStatus) {
            console.log(gestureStatus)
        }
    },
    components: {
        Gesture
    }
}
</script> 

API

所有回调函数的参数$event实际上是一个gestureStatus，它包含了你需要的所有信息。具体信息查看这里

props:

common props

name	type	default	description
direction	string	`all`	control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']`

Tap & Press

name	type	default	description
onTap	function		single tap callback
onPress	function		long tap callback
onPressOut	function		long tap end callback

Swipe

name	type	default	description
onSwipe	function		swipe callback, will triggered at the same time of all of below callback
onSwipeLeft	function		swipe left callback
onSwipeRight	function		swipe right callback
onSwipeTop	function		swipe top callback
onSwipeBottom	function		swipe bottom callback

Pan

name	type	default	description
onPan	function		pan callback, will triggered at the same time of all of below callback
onPanStart	function		drag start callback
onPanMove	function		drag move callback
onPanEnd	function		drag end callback
onPanCancel	function		drag cancel callback
onPanLeft	function		pan left callback
onPanRight	function		pan right callback
onPanTop	function		pan top callback
onPanBottom	function		pan bottom callback

Pinch

pinch gesture is not enabled by default, you must set enablePinch = true or enablePinch in component:

name	type	default	description
onPinch	function		pinch callback, will triggered at the same time of all of below callback
onPinchStart	function		pinch start callback
onPinchMove	function		pinch move callback
onPinchEnd	function		pinch end callback
onPanCancel	function		pinch cancel callback
onPinchIn	function		pinch in callback
onPinchOut	function		pinch out callback

Rotate

pinch gesture is not enabled by default, you must set props.enableRotate = true at first;

name	type	default	description
onRotate	function		rotate callback, will triggered at the same time of all of below callback
onRotateStart	function		rotate start callback
onRotateMove	function		rotate move callback
onRotateEnd	function		rotate end callback
onRotateCancel	function		rotate cancel callback

gesture

// http://hammerjs.github.io/api/#event-object
export interface IGestureStauts {
    /* start status snapshot */
    startTime: number;
    startTouches: Finger[];
 
    startMutliFingerStatus?: MultiFingerStatus[];
 
    /* now status snapshot */
    time: number;
    touches: Finger[];
 
    mutliFingerStatus?: MultiFingerStatus[];
 
    /* delta status from touchstart to now, just for singe finger */
    moveStatus?: SingeFingerMoveStatus;
 
    /* whether is a long tap */
    press?: boolean;
 
    /* whether is a swipe*/
    swipe?: boolean;
    direction?: number;
 
    /* whether is in pinch process */
    pinch?: boolean;
    scale?: number;
 
    /* whether is in rotate process */
    rotate?: boolean;
    rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch.
};

Development

npm install
npm start