vue-tap-mixin's Introduction

vue-tap-mixin

Automatically convert click event to tap event without delay on the mobile side. Suported all Vue click event modifiers.

.stop
.prevent
.capture
.self
.once
.passive

Installation

Install

$ npm install vue-tap-mixin --save
# or
$ yarn add vue-tap-mixin

ES6

import VueTapMixin from 'vue-tap-mixin'

Vue.use(VueTapMixin)

CommonJS

var Vue = require('vue');
var VueTapMixin = require('vue-tap-mixin');

Vue.use(VueTapMixin);

Browser

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/vue-tap-mixin@latest/dist/vue-tap-mixin.umd.js"></script>
<!-- OR -->
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-tap-mixin/dist/vue-tap-mixin.umd.js"></script>

Useage

<template>
  <div id="app">
    <div @click="goTap($event, 'Tap 2')">Tap 1</div>
    <div @tap.stop="goTap($event, 'Tap 2')">Tap 1</div>
    <div @tap.prevent="goTap($event, 'Tap 2')">Tap 1</div>
    <div @tap="goTap($event, 'Tap 2')">Tap 1</div>
    <div @tap="(e) => { goTap(e, 'Tap 2') }">Tap 2</div>
    <div @tap="goTap2('Tap 3')">Tap 3</div>
    <button type="button" disabled="disabled" @tap="notWorks">Not trigger tap event</button>
    {{ aaa }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      aaa: ''
    }
  },
  methods: {
    goTap(e, txt) {
      console.log(e)
      this.txt = txt
    },
    goTap2(txt) {
      this.txt = txt
    }
  }
}
</script>