Vue范围滑块使页面无法在移动设备上滚动答案

【问题标题】：Vue range slider making page not scrollable on mobileVue范围滑块使页面无法在移动设备上滚动
【发布时间】：2020-07-07 08:35:55
【问题描述】：

在 VUE 中，我有一个范围滑块组件，用于在用户拖动滑块时在设定点显示不同的值。这一切都很好，我唯一的问题是滑块 VUE 滑块组件使我的页面无法在移动设备上滚动。浏览器是否以某种方式与拖动操作混淆，这意味着它不知道它发生在滑块上而是在实际页面上？有什么想法可以解决这个问题吗？谢谢

<div class='slider margin-top-10 margin-bottom-40'>
    <range-slider
        v-model="value"
        :min="min"
        :max="max"
        :step="step"
        :range="range"
        :height="barheight"
        :dot-height="dotheight"
        :dot-width="dotwidth"
        :piecewise-label="label"
        :process-style="processstyle">
    </range-slider>
</div>

import RangeSlider from 'vue-range-component'
export default {
    components: {
        RangeSlider
    },
    props: {
        membership: {
            type: Object,
        },
        translations: {
            type: Object
        },
        isAgency: {
            type: Boolean
        },
        clientsCap: {
            type: Number
        }
    },
    data: function() {
        return {
            value: 10,
            min: 10,
            max: 50,
            step: 10,
            data: [10, 20, 30, 40, 50,],
            range: [{label: '10'}, {label: '20'}, {label: '30'}, {label: '40'}, {label: '50'}],
            label: true,
            barheight: 3,
            dotwidth: 16,
            dotheight: 16,
            processstyle: { backgroundColor: 'transparent'}
        }
    },
    created: function(){
        this.$emit('updateImages', this.value);
    },
    watch: {
        value: function(){
            this.$emit('updateImages', this.value);
        }
    },
    computed: {
        price: function() {
            var price = this.value * this.membership.additional_images;
            if(this.isAgency)
                price = price * this.clientsCap;
            if(this.membership.priceOffered < this.membership.basePrice && this.membership.priceOffered !== undefined)
                price = price - (price * 0.10);

            return price;
        }
    }
}

【问题讨论】：

在范围滑块上设置背景颜色并在移动浏览器上进行测试。也许它填满了所有的浏览器屏幕
@hamidkeyhani 试过了，滑块没有填满浏览器屏幕。
我还注意到，当页面上出现滑块时，我无法在输入框中输入内容

标签： javascript vue.js rangeslider

【解决方案1】：

我还遇到了输入文本输入字段的问题，以及滚动在移动设备上被阻止的事实。

为了解决这个问题，我下载了库本身并删除了所有事件处理方法和键（keydown、keyup），这有助于解决文本输入问题。滚动需要删除f = "touchstart"这一行

【讨论】：

【解决方案2】：

这个错误已经在 github repo 中修复，但 npm repo 没有更新。 https://github.com/xwpongithub/vue-range-slider/blob/master/src/js/vue-range-slider.js#L1006

所以你需要从 npm 中移除已安装的包

"vue-range-component": "^1.0.3",

直接从github添加

"vue-range-component": "xwpongithub/vue-range-slider",

【讨论】：

你刚刚救了我的命。谢谢
这个修复帮助我

【解决方案3】：

您需要清除以下行：x="" 和 w="" 这是粗略的第 73 和 74 行

【讨论】：

【解决方案4】：

解决这个问题的方法可能如下。在你有这个组件的 Vue 创建的函数中，放置以下行。

created () {
    VueRangeSlider.methods.handleKeyup = ()=> console.log;
    VueRangeSlider.methods.handleKeydown = ()=> console.log;
},

【讨论】：