@vue-mixin/touch

touch mixin for vue

Usage no npm install needed!

<script type="module">
  import vueMixinTouch from 'https://cdn.skypack.dev/@vue-mixin/touch';
</script>

README

@vue-mixin/touch

Touch mixin for vue Demo


Install
npm install @vue-mixin/touch --save
Import
import touchMixin from "@vue-mixin/touch"

export default {
    mixins: [touchMixin],
}

Swipe
  • template
<div ref="touchSwipe"></div>
  • script
export default {
    methods: {
        /* ↑ */
        touchSwipeToUp() {
            console.log("Up")
        },

        /* ← */
        touchSwipeToLeft() {
            console.log("Left")
        },

        /* → */
        touchSwipeToRight() {
            console.log("Right")
        },

        /* ↓ */
        touchSwipeToDown() {
            console.log("Down")
        },
    },
}

Tap
  • template
<div ref="touchTap"></div>
  • script
export default {
    methods: {
        /* doesn't fire on click */
        touchTap() {
            console.log("Tap")
        },
    },
}