美文网首页
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