vue-tap-mixin

0.0.4 • Public • Published

vue-tap-mixin

npm version Gzip Size Monthly Downloads License: MIT

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>

MIT License

Copyright © 2019 LinQuan.

Readme

Keywords

Package Sidebar

Install

npm i vue-tap-mixin

Weekly Downloads

3

Version

0.0.4

License

MIT

Unpacked Size

86.4 kB

Total Files

8

Last publish

Collaborators

  • mlinquan