时间戳

首页 > 解决方案 > Vuetify - 如何在滑块刻度标签中添加 html

vue.js - Vuetify - 如何在滑块刻度标签中添加 html

问题描述

我在我的 vue 应用程序中使用 Vuetify，需要在我的刻度标签中提供 HTML 标签，我检查了 Vuetify 文档，但发现它接受字符串，如果我们传递 HTML，它会将其呈现为字符串。有没有办法可以在刻度标签中注入 HTML。这是我尝试过的：

Codepen 链接在这里：https ://codepen.io/vishalgulati/pen/gOYyMza?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-card flat color="transparent">
      <v-subheader>Tick labels</v-subheader>

      <v-card-text>
        <v-slider
          v-model="fruits"
          :tick-labels="ticksLabels"
          :max="3"
          step="1"
          ticks="always"
          tick-size="2"
        ></v-slider>
      </v-card-text>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  data () {
    return {
      value: 0,
      fruits: 0,
      ticksLabels: [
        '<span>&nbsp</span>',
        '',
        'Pear',
        'Apple'
      ]
    }
  }
})

标签： vue.jsvuejs2vuetify.js

解决方案

为拇指标签使用模板槽。在他们的文件中找到：

<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col class="pa-12">
        <v-range-slider
          :tick-labels="seasons"
          :value="[0, 1]"
          min="0"
          max="3"
          ticks="always"
          tick-size="4"
        >
          <template v-slot:thumb-label="props">
            <v-icon dark>
              {{ season(props.value) }}
            </v-icon>
          </template>
        </v-range-slider>
      </v-col>
    </v-row>
  </v-app>
</div>

...
  data: () => ({
    seasons: [
      'Winter',
      'Spring',
      'Summer',
      'Fall',
    ],
    icons: [
      'mdi-snowflake',
      'mdi-leaf',
      'mdi-fire',
      'mdi-water',
    ],
  }),

  methods: {
    season (val) {
      return this.icons[val]
    },
  },
})

来源：https: //vuetifyjs.com/en/components/sliders#custom-range-slider 代码笔：https ://codepen.io/pen/?&editable=true&editors=101

推荐阅读