vuejs / vue-touch

Hammer.js wrapper for Vue.js
MIT License
2.72k stars 391 forks source link

Disable for desktop (without VueJs warning about unknown element) #97

Open MikaelEdebro opened 7 years ago

MikaelEdebro commented 7 years ago

I'm using vue-touch@next to wrap my entire app, in order to be able to swipe left/right to navigate between different steps/routes in my app (sort of what you normally do in a mobile app). However, when vue-touch is enabled, I can't highlight/copy text on the page.

My App.js:

<template>
    <div id="app" :style="styles">
        <v-touch @swipeleft="swipeLeft" @swiperight="swipeRight">
            <transition name="fade" mode="out-in">
                <router-view class="view"></router-view>
            </transition>
        </v-touch>
    </div>
</template>

I have disabled the initialization of the plugin with:

if (isMobile) {
    VueTouch.config.swipe = {
        direction: 'horizontal'
    }
    Vue.use(VueTouch)
}

However, then I get VueJs warning that v-touch is not a known element. Is there any good way to disable swipe gestures for desktop?

MikaelEdebro commented 7 years ago

Tried using: <v-touch @swipeleft="swipeLeft" @swiperight="swipeRight" :options="swipeOptions">

            return {
                enable: this.isMobile
            }
        }

However, it still disables selecting text on page.

LinusBorg commented 7 years ago

You might be interested in why you can't select text, and what solution hammerjs, the library that vue-touch is wrapping, offers in that regard - in that case, read the answer to : "I can't select my text anymore!" on this page

vue-touch itself can't do much about it.

MikaelEdebro commented 7 years ago

Thanks for the quick reply @LinusBorg