如何更改 Vuetify v-slider 组件拇指标签中文本的颜色？

Question

我现在一直在努力，我的目标是为我的 v 滑块的拇指标签提供自定义颜色，在我的组件部分中定义。我该怎么做？

谢谢，乔斯特

Answer 1

使用

:deep

选择器：

<style scoped>
  :deep(.v-slider-thumb__label) {
    background-color: red;
  }
  :deep(.v-slider-thumb__label::before) {
    color: red;
  }
</style>

如果您需要它反映脚本中定义的颜色，您可以执行以下操作：

<script setup>
  //...

  const color = ref('red')
</script>

<style scoped>
  :deep(.v-slider-thumb__label) {
    background-color: v-bind(color);
  }
  :deep(.v-slider-thumb__label::before) {
    color: v-bind(color);
  }
</style>