🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

vue2-hammer

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-hammer

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

2.1.2
latest
Source
npm
Version published
Weekly downloads
14K
74.09%
Maintainers
1
Weekly downloads
 
Created
Source

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.

If you want to find a same wrapper for Angular4+, you can have a look at ngx-hammer

Install

This plugin supports Vue >= 2.0.

npm

Available through npm as vue2-hammer.

npm install vue2-hammer
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)

Usage

Using the v-hammer directive

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

<div v-hammer:swipe.left="onSwipeLeft">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
VueHammer.config.swipe = {
  threshold: 200
};
<a
  v-hammer:tap="onTap"
  v-hammer:pan:horizontal="onPanHorizontal"
  v-hammer:panstart="onPanStart"
  v-hammer:panend="onPanEnd"
  v-hammer:press="onPress"
  v-hammer:pressup="onPressup"
></a>
<a ></a>
<a ></a>

See Hammer.js documentation for all available events.

Supported gestures and directions

gestures

tap, pan, pinch, press, rotate, swipe

directions

up, down, left, right, horizontal, vertical, all

Note

Users can use both the gesture and the direction like v-hammer:swipe.left. But if your combination is not exist in the hammer, it is not support.

Run the Example

  • Run yarn or npm i
  • Run yarn build or npm run build
  • Open the index.html in the example directory.

License

MIT

Keywords

vue2-hammer

FAQs

Package last updated on 31 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts