vuetify 滑块自定义消息答案

【问题标题】：vuetify slider custom messagevuetify 滑块自定义消息
【发布时间】：2020-03-20 03:10:28
【问题描述】：

如何在 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>

【问题讨论】：

您想在哪里添加自定义文本，而不是“8”或滑块下方？
而不是 8 我想要类似 'The number is: 8'

标签： vue.js vue-component vuetify.js

【解决方案1】：

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

在这里工作的代码笔： 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,
    }
  },
})

【讨论】：

A 与 v-range-slider 有类似的问题，这对我有帮助，我错过了范围内的“项目”。