You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 26, 2018. It is now read-only.
> This plugin requires Vue >= 2.0. For the Vue 1.\*-compatible version, see the `1.0` branch
12
+
12
13
13
14
- Available through npm as `vue-touch`.
14
15
15
-
```js
16
-
var VueTouch =require('vue-touch')
17
-
Vue.use(VueTouch)
18
-
```
16
+
```Javascript
17
+
var VueTouch =require('vue-touch')
18
+
Vue.use(VueTouch, {name:'v-touch'})
19
+
```
20
+
You can pass an options object as the second argument, which at the moment accepts one property, `name`. It's used to define the name of the component that is registered with Vue and defaults to `'v-touch'`.
19
21
20
22
#### Direct include
21
23
22
24
- You can also directly include it with a `<script>` tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global `VueTouch`.
<!-- Render as other elements with the 'tag' prop -->
35
+
<v-touchtag="a"v-on:tap="onTap">Tap me!</v-touch>
36
+
```
37
+
38
+
## API
39
+
40
+
### Component Events
41
+
42
+
vue-touch supports all Hammer Events ot of the box, just bind a listener to the component with `v-on` and vue-touch will setup the Hammer Manager & Recognizer for you.
// add the callback method to the methods of our component:
36
-
methods: {
37
-
onSwipeLeft(event) {
38
-
// event is a Hammer Event Object
86
+
## Public Component Methods
87
+
88
+
The component exposes a few convenience methods to enable and disable Recognizers:
89
+
90
+
|Method|Explanation|
91
+
|------|-----------|
92
+
|`disable(event)`|disable the Recognizer for `event`|
93
+
|`enable(event)`|disable the Recognizer for `event`|
94
+
|`disableAll`|disable all Recognizers|
95
+
|`enableAll`|enable all Recognizers|
96
+
|`isEnabled(event)`|returns `true` if Recognizer for `event` is currently enabled|
97
+
98
+
```html
99
+
<template>
100
+
<v-touchref="tapper"@tap="callback"></v-touch>
101
+
</template>
102
+
<script>
103
+
exportdefault {
104
+
methods: {
105
+
disableTap() {
106
+
this.$refs.tapper.disable('tap')
107
+
},
108
+
enableTap() {
109
+
this.$refs.tapper.enable('tap')
110
+
}
111
+
}
39
112
}
40
-
}
113
+
</script>
41
114
```
42
115
43
-
See the [Hammer.js API documentation for the Event Object](https://hammerjs.github.io/api/#event-object) to learn about all of the event object's properties
116
+
### Plugin Methods
44
117
45
-
#### Configuring Global Recognizer Options
118
+
#### Global Event Options
46
119
47
-
You can set global options for your recognizers like this:
120
+
You can define global defaults for the builtin recognizers
48
121
49
122
```js
50
123
// change the threshold for all swipe recognizers
@@ -55,7 +128,7 @@ VueTouch.config.swipe = {
55
128
56
129
#### Registering Custom Events
57
130
58
-
If you want to use different options from the global ones for a Hammer event, you can create a custom event.
> **Warning**: You have to register your custom events *before* installing the plugin with `Vue.use(VueTouch)`.
143
+
VueTouch will log a warning to the console (in dev mode) if you try to do that afterwards, and the event will not work.
144
+
145
+
This will make it possible to listen for this event on `<v-touch>`. Additionally, just like for "normal" events, you can pass further options as the corresponding prop.
0 commit comments