【问题标题】: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 有类似的问题,这对我有帮助,我错过了范围内的“项目”。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-04-05
  • 1970-01-01
  • 1970-01-01
  • 2016-01-28
  • 1970-01-01
  • 2012-01-09
  • 2016-09-11
相关资源
最近更新 更多