Vue 范圍滑塊使頁面無法在移動設備上滾動

Question

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

Answer 1

此錯誤已在 github 存儲庫中修復，但 npm 存儲庫未更新。 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",

Answer 2

這個問題的解決方案可能如下。 在您擁有此組件的 Vue 的 created 函數中，放置以下幾行。

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

Answer 3

我還遇到了輸入文本輸入字段的問題以及滾動在移動設備上被阻止的問題。

為了解決這個問題，我下載了庫本身並刪除了所有事件處理方法和鍵（keydown、keyup），這有助於解決文本輸入問題。 對於滾動，您需要刪除f = "touchstart"

Answer 4

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