求助：Vuetify滑块停在中间完全无法拖动移动

版本信息 #

• Vue 3.2.45
• Vuetify 3.1.0
• Vite 4.0.0

代码示例 #

<script>
export default {
  data: () => ({
    slider1: 0,
    slider2: 50,
    slider3: 100,
  }),
};
</script>

<template>
  <div>
    <v-card>
      <v-slider v-model="slider1"></v-slider>
      <v-slider v-model="slider2"></v-slider>
      <v-slider v-model="slider3"></v-slider>
    </v-card>
  </div>
</template>

问题复现 #

可在Vuetify Playground复现该问题。

解决方案 #

这是Vuetify 3.1.0版本的已知bug，该版本滑块组件存在交互失效问题，导致滑块无法拖动。

两种解决方式：

1. 优先升级版本：将Vuetify升级到3.1.1及以上版本，官方已在后续版本修复此问题。
2. 临时替代方案：如果暂时无法升级，可给每个滑块添加:disabled="false"属性强制开启交互，修改后代码如下：

<script>
export default {
  data: () => ({
    slider1: 0,
    slider2: 50,
    slider3: 100,
  }),
};
</script>

<template>
  <div>
    <v-card>
      <v-slider v-model="slider1" :disabled="false"></v-slider>
      <v-slider v-model="slider2" :disabled="false"></v-slider>
      <v-slider v-model="slider3" :disabled="false"></v-slider>
    </v-card>
  </div>
</template>

内容的提问来源于stack exchange，提问作者RuntimeErrorz