我如何设计风格<v-slider disabled>像我启用的 slider 一样吗？</v-slider>

Question

我正在努力使我禁用<v-slider>看起来与启用的相同：

这是启用的 slider 的示例

<style>
.theme--light.v-slider .v-slider__track-background, .theme--light.v-slider .v-slider__track-fill, .theme--light.v-slider .v-slider__thumb {
    /* background: rgba(0, 0, 0, 0.26); */
    background: rgb(238, 238, 238);
}
.v-slider__track-fill {
    background: #2196f3!important;
}
</style>

问题是我的范围 slider 拇指似乎是白色的，或者在 css 中找不到某种间隙：

有没有一种简单的方法可以使禁用范围 slider styles 与正常 styles 匹配？ 或者一种修复拇指的方法，使其也是蓝色的？

Answer 1

我无法在 codepen 中重现此内容，但您可以尝试将此样式添加到已禁用的 slider 中。

如果你使用 scss/sass 但范围有限

::v-deep .v-slider__track-fill {
  border-color: #2196f3 !important;
  background-color: #2196f3 !important;
}

如果您使用 css 但范围

>>> .v-slider__track-fill {
  border-color: #2196f3 !important;
  background-color: #2196f3 !important;
}

Answer 2

而不是<slider disabled>使用<slider readonly> 。 这样它就不会添加禁用的 styles 并允许您在没有滑动功能的情况下保持正常的 styles。