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

Question

In VUE I have a range slider component that I use to display different values at set point when the user drags the slider. This is all working fine, the only problem that I have is that the slider VUE slider component is making my page not scrollable on mobile. Is the browser getting confused somehow with the drag action, meaning it doesn't know it's happening on the slider but on the actual page? Any ideas how I can solve this? Thanks

<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;
        }
    }
}

Answer 1

This bug already fixed in github repo BUT npm repo not updated. https://github.com/xwpongithub/vue-range-slider/blob/master/src/js/vue-range-slider.js#L1006

So you need remove installed package from npm

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

and add directly from github

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

Answer 2

A solution to this problem may be the following. In the created function of Vue where you have this component place the following lines.

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

Answer 3

I also ran into the problem of entering text input fields and the fact that the scroll is blocked on mobile devices.

To solve it, I downloaded the library itself and deleted all the event processing methods and keys (keydown, keyup), this helped with a text input problem. For scrolling, you need to delete the line f = "touchstart"

Answer 4

您需要清除该行：x="" 和 w="" 粗略的，第 73 行和第 74 行