euv-gesture v0.0.1

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

Tap & Press

Swipe

Pan

Pinch

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

Rotate

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

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