美文网首页
Vue.dragger 导致页面click失效

Vue.dragger 导致页面click失效

作者: fordG | 来源:发表于2021-07-02 12:36 被阅读0次

touch移动后取消导致click点击无效, 需要再次点击才可以, 这里使用touch来替代页面上的click时间,touch延迟到替换click

  • 页面所有的点击用这个组件包装
<template>
    <view @touchstart="touchstart" @touchmove="touchmove">
        <slot></slot>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                clicking: false,
                move: false,
            }
        },
        
        methods: {
            
            touchmove(e){
                this.move = true
            },
            
            touchstart(e){
                this.move = false
                if(this.clicking == true && !this.touchEnd){
                    return;
                }
                
                this.touchEnd = false
                this.clicking = true;
                setTimeout(e=>{
                    this.clicking = false
                    if(!this.move){
                        this.$emit('click')
                    }
                }, 250)
            }
        }
    }
</script>

<style>
</style>


相关文章

网友评论

      本文标题:Vue.dragger 导致页面click失效

      本文链接:https://www.haomeiwen.com/subject/ogveultx.html