diff --git a/README.md b/README.md
index a9ad96a..802eda0 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ Features:
* Binding multiple touch events on one DOM element
* Customizable events with native-likely events handler
* Allow splitting configurations for different DOM elements by `v-touch-options` directive
+* Directive names can be customized to avoid namespace conflict
## Install
@@ -80,7 +81,7 @@ In your `.vue` file:
Customize touch class
```
-If you use vue and this plugin in UMD way (in a script tag) , this plugin is auto used. So it's not necessary to wirte `Vue.use(Vue2TouchEvents)`.
+If you use vue and this plugin in UMD way (in a script tag) , this plugin is auto used. So it's not necessary to write `Vue.use(Vue2TouchEvents)`.
```html
@@ -98,7 +99,8 @@ Vue.use(Vue2TouchEvents, {
tapTolerance: 10,
touchHoldTolerance: 400,
swipeTolerance: 30,
- longTapTimeInterval: 400
+ longTapTimeInterval: 400,
+ namespace: 'touch'
})
```
@@ -120,6 +122,8 @@ Vue.use(Vue2TouchEvents, {
* `longTapTimeInterval` default `400` in millisecond. The minimum time interval to detect whether long tap event effective or not.
+* `namespace` default `touch`(v3.2.0). Customize the directive names to avoid namespace conflict. By default, the `touch` means `v-touch` and `v-touch-class` are available, and you can use `v-click` and `v-click-class` by change `namespace` to `click`.
+
### Directives
#### v-touch
diff --git a/index.d.ts b/index.d.ts
index 0efb48d..93df285 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -8,6 +8,8 @@ export interface Vue2TouchEventsOptions {
tapTolerance?: number;
swipeTolerance?: number;
longTapTimeInterval?: number;
+ touchHoldTolerance?: number;
+ namespace?: string;
}
export default Vue2TouchEvents;
diff --git a/index.js b/index.js
index b4e4a9b..5313831 100644
--- a/index.js
+++ b/index.js
@@ -45,7 +45,8 @@ var vueTouchEvents = {
swipeTolerance: 30, // px
touchHoldTolerance: 400, // ms
longTapTimeInterval: 400, // ms
- touchClass: ''
+ touchClass: '',
+ namespace: 'touch'
}, constructorOptions);
function touchStartEvent(event) {
@@ -271,7 +272,7 @@ var vueTouchEvents = {
return $el.$$touchObj;
}
- Vue.directive('touch', {
+ Vue.directive(globalOptions.namespace, {
bind: function ($el, binding) {
// build a touch configuration object
var $this = buildTouchObj($el);
@@ -349,7 +350,7 @@ var vueTouchEvents = {
}
});
- Vue.directive('touch-class', {
+ Vue.directive(globalOptions.namespace + '-class', {
bind: function ($el, binding) {
buildTouchObj($el, {
touchClass: binding.value
@@ -357,7 +358,7 @@ var vueTouchEvents = {
}
});
- Vue.directive('touch-options', {
+ Vue.directive(globalOptions.namespace + '-options', {
bind: function($el, binding) {
buildTouchObj($el, binding.value);
}
diff --git a/package.json b/package.json
index 50652a9..08d399d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue2-touch-events",
- "version": "3.1.1",
+ "version": "3.2.0",
"description": "Simple touch events support for vueJS2",
"main": "index.js",
"types": "index.d.ts",