euv-gesture

0.0.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i euv-gesture

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

25.6 kB

Total Files

10

Last publish

Collaborators

  • targeral