https://github.com/bsdfzzzy/vue2-hammer

Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.
https://github.com/bsdfzzzy/vue2-hammer

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/bsdfzzzy/vue2-hammer
• Owner: bsdfzzzy
• License: mit
• Created: 2017-08-30T13:22:15.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-05-05T11:55:41.000Z (over 3 years ago)
• Last Synced: 2024-10-31T15:53:37.272Z (13 days ago)
• Language: JavaScript
• Size: 61.5 KB
• Stars: 255
• Watchers: 5
• Forks: 48
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/bsdfzzzy/ngx-hammer)

## Install

> This plugin supports Vue >= 2.0.

### npm

Available through npm as `vue2-hammer`.

```bash

npm install vue2-hammer

```

```Javascript

import { VueHammer } from 'vue2-hammer'

Vue.use(VueHammer)

```

## Usage

#### Using the `v-hammer` directive

```html

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:

```js

// change the threshold for all swipe recognizers

VueHammer.config.swipe = {

  threshold: 200

};

```

```html







```

See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) 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](http://opensource.org/licenses/MIT)