vuezingtouch's Introduction

VueZingTouch

A wrapper for ZingTouch.

dependencies

setup

npm

npm install vuezingtouch

ES module

import Vue from 'vue';
import VueZingTouch from 'vuezingtouch';

Vue.directive(VueZingTouch.name, VueZingTouch);

import VueZingTouch from 'vuezingtouch';

export default {
  directives: {
    [VueZingTouch.name]: VueZingTouch,
  },
  /*...*/
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuezingtouch"></script>

If Vue is detected, the directive will be registered automatically.

usage

<template>
  <div
    v-zing-touch:swipe="onSwipe"
    style="
      align-items: center;
      background-color: yellow;
      display: flex;
      justify-content: center;
      touch-action: none;
    "
  >{{ pageIndex }}</div>
</template>
<script>
export default {
  data: {
    pageIndex: 0,
  },
  methods: {
    onSwipe(event) {
      if (event.detail[0].currentDirection === 180) {
        this.pageIndex++;   
      } else
      if (event.detail[0].currentDirection === 360) {
        this.pageIndex--;
      }
    },
  },
};
</script>

Override default options.

<div
  v-zing-touch:tap="{
    maxDelay: 200,
    numInputs: 2,
    tolerance: 125,
    handler: onTap,
  }"
><!--...--></div>

Define new gestures.

<div
  v-zing-touch:shortTap="{
    type: 'tap',
    maxDelay: 60,
    handler: onShortTap,
  }"
  v-zing-touch:longTap="{
    type: 'tap',
    minDelay: 300,
    handler: onLongTap,
  }"
><!--...--></div>

vuezingtouch's People

Contributors

Stargazers

Watchers

vuezingtouch's Issues

some advices

How to set region parameters capture and preventDefault, do you plan to use modifiers to set it?
like it.

<button v-zing-touch:tap.prevent.stop='callback'></button>

how to use chainObject to bind multi gestures

var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(myElement);
var chainableObject = myRegion.bind(myElement);

chainableObject
	.tap(function(e){
		console.log(e.detail);
	})
	.swipe(function(e){
		console.log(e.detail);
	}, true)

Recommend Projects