vuetify 滑块自定义消息

Question

如何在 vuetify 滑块上创建自定义消息？

我想添加类似“数字是：8”的内容

 <v-slider
            class='slider'
            step="1"
            thumb-label="always"  
            ticks
            tick-size="2"
            :max="8"
            track-color="#E1E4E9"
            thumb-color="#ED5565"
            color='#ED5565'
        ></v-slider>

Answer 1

可以在 vuetify 滑块中设置自定义消息，但我们需要增加拇指标签的大小

在这里工作 codepen：https ://codepen.io/chansv/pen/vYYwjep ? editors = 1010

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">
      <v-subheader>Rules</v-subheader>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <v-card-text class="pt-0">
        <v-slider
          v-model="value"
          label="How many?"
          thumb-label="always"
          :thumb-size="120"
        >
          <template v-slot:thumb-label="item">
            The number is: {{item.value}}
          </template>
        </v-slider>
      </v-card-text> 
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      value: 30,
    }
  },
})