Skip to content

A Vue.js directive both for long press touch on mobile and right click on pc.

License

Notifications You must be signed in to change notification settings

hua1995116/vue-flex-touch

Repository files navigation

vue-flex-touch

A Vue.js directive both for long press touch on mobile and right click on pc

Demo

https://n0v3orw484.codesandbox.io/

Install

npm install vue-flex-touch

Usage

// main
import flexTouch from 'vue-flex-touch'

Vue.use(flexTouch, { timeout: 900 });

// component
<div id="app" v-flex-touch="handleTouch">
  <h1>I'm flex touch demo</h1>
  {{flex}}
</div>


data() {
  return {
    flex: false
  };
},
methods: {
  handleTouch() {
    this.flex = !this.flex;
  }
}

Examle

base use

Edit Vue Template

used in chat '@'

Edit Vue Template

Options

Prop Type default description
timeout number 500(ms) time for long touch. (only mobile)
needSelect boolean false If true, select text
preventDefault boolean true If true, stop default event)

API

vue-flex-touch="handleTouch"

handleTouch(e, type) => void

Arguements:

  • e {Object} event callback
  • type 'touch'|'rightClick' enum type

License

MIT

Copyright (c) 2019 蓝色的秋风

About

A Vue.js directive both for long press touch on mobile and right click on pc.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published