Vuetify - 限制 slider 可以在 v-slider 中移动到的最小值

Question

我正在使用 Vuetify 的 v-slider 组件，它一直运行良好，直到我有一个要求，其中我需要设置最小值，超过该最小值 slider 不应该被允许移动。

例如，如果 v-slider 的范围从 0 到 10，我想将拇指移动限制为最小 2，因此如果用户试图将拇指移动到小于 2 的任何位置，则不应允许他这样做。

我在 vuetify v1.5 中没有找到任何可配置的属性。 这是可以实现的吗？ 这是我的代码：

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">  
      <v-card-text>
        <v-layout row>
          <v-flex class="pr-3">
            <v-slider
              v-model="slider"
              :max="max"
              :min="min"
            ></v-slider>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  data () {
    return {
      min: 0,
      max: 10,
      slider: 6
    }
  }
})

Codepen - https://codepen.io/vishalgulati/pen/gOOMJvX

Answer 1

尝试这个：

<v-slider
      v-model="slider"
      :max="max"
      :min="min"
      @input="catchInput"
      :key="sliderKey"
>
</v-slider>
new Vue({
  el: '#app',
  data () {
    return {
      min: 0,
      max: 10,
      slider: 6,
      sliderKey: 0

    }
  },
  methods: {
    catchInput(e){
      if (e < 3){
        this.slider = 2
        this.sliderKey++
      }
    }
  }
})

它的作用是捕获输入并检查它是否为 2 或更少。 在这种情况下， catchInput方法将 slider 的值设置为 2，并强制使用 sliderKey 重新渲染sliderKey 。 希望这很清楚。