Need help with vue2-hammer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

bsdfzzzy
242 Stars 47 Forks MIT License 44 Commits 24 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 328,042
Dart
Shell
Flutter
mobx
25 commits
# 3,545
HTML
html5
Jupyter...
Three.j...
3 commits
# 340,867
HTML
CSS
lazy-lo...
nuxtjs
3 commits
# 168,566
Shell
Symfony
data-bi...
knockou...
1 commit
# 487,721
TypeScr...
github-...
HTML
lightho...
1 commit
# 31,668
PHP
MySQL
piwik
Vue.js
1 commit

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

Tap me!

Swipe me!
Swipe me!

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
};



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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.