Eoss-touch NPM

vue-hammer

Hammer.js wrapper for Vue to support some operation in the mobile

This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration is from v-touch.

Install

This plugin supports Vue >= 2.0.

npm

Available through npm as eoss-touch.

npm install eoss-touch

import { esTouch } from 'eoss-touch'
Vue.use(esTouch)

Usage

Using the `v-touch` directive

<a v-touch:tap="onTap">Tap me!</a>

<a v-touch:tap="{methods:onTap,params:'onTap方法回传参数'}">Tap me!</a>

<div v-touch:swipe.horizontal="onSwipe">根据对象的type判断左右</div>

<div v-touch:swipe.left="onSwipeLeft">Swipe me!</div>

<div v-touch:swipe.left="(event)=> onSwipeLeft(event, item, i)">Swipe me!</div>

Configuring Recognizer Options

There are two ways to customize recognizer options such as direction and threshold. The first one is setting global options:

// change the threshold for all swipe recognizers
esTouch.config.swipe = {
  threshold: 200,
}

<a
  v-touch:tap="onTap"
  v-touch:pan.horizontal="onPanHorizontal"
  v-touch:panstart="onPanStart"
  v-touch:panend="onPanEnd"
  v-touch:press="onPress"
  v-touch:pressup="onPressup"
></a>
<a></a>
<a></a>

See Hammer.js documentation for all available events.