Add a namespace option to avoid conflicts

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:
 <span v-touch:tap="tapHandler" v-touch-options="{touchClass: 'active'}">Customize touch class</span>
 ```
 
-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
 <script src="path/to/vue.js"></script>
@@ -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

index.d.ts

@@ -8,6 +8,8 @@ export interface Vue2TouchEventsOptions {
   tapTolerance?: number;
   swipeTolerance?: number;
   longTapTimeInterval?: number;
+  touchHoldTolerance?: number;
+  namespace?: string;
 }
 
 export default Vue2TouchEvents;

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,15 +350,15 @@ var vueTouchEvents = {
             }
         });
 
-        Vue.directive('touch-class', {
+        Vue.directive(globalOptions.namespace + '-class', {
             bind: function ($el, binding) {
                 buildTouchObj($el, {
                     touchClass: binding.value
                 });
             }
         });
 
-        Vue.directive('touch-options', {
+        Vue.directive(globalOptions.namespace + '-options', {
             bind: function($el, binding) {
                 buildTouchObj($el, binding.value);
             }

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",