Vuetify滑块：将鼠标光标更改为悬停指针，然后单击

Question

悬停或单击滑块（vuetify的蓝色圆形按钮元素时，v-slider中是否可以更改鼠标光标？

这是现在的样子/表现：

这是我希望它的外观/行为方式：

我尝试了内联样式，但无效：style="cursor: pointer"

Answer 1

没有可用于更改光标的道具。更改光标以将CSS添加到.v-slider__thumb类的可能方法

.v-slider__thumb{
  cursor:grabbing;
  height:42px;
  width:42px;
}

Codepen：https://codepen.io/anon/pen/XGOqWm

Answer 2

这是我的做法。当用户点击并按住滑块的可拖动部分时，此方法使光标从 grab 变为 grabbing。

<style scoped lang="scss">
  .my-slider-class >>> .v-slider {
    cursor: pointer;
    &:active {
      cursor: grabbing;
    }
    .v-slider__thumb {
      cursor: grab;
      &:active {
        cursor: grabbing;
      }
    }
  }
</style>

Answer 3

首先向 then 样式添加一个类作为 CSS。下面的例子

<v-list>
   <v-list-item
       v-for="(item, index) in items"
          :key="index"
         >
           <v-list-item-title
             class="row-pointer"
         >{{ item.title }}</v-list-item-title>
    </v-list-item>
 </v-list>

<style scoped>
.row-pointer {
  cursor: pointer;
}
</style>