Neoprene Party Masks

    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
    

    Keywords

    Install

    npm i euv-gesture

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • targeral