将类添加到 Vuetify 的 v-select 组件的第一项

Question

我正在使用v-select component from Vuetify，我想为 v-select 组件的第一项添加一个类，例如，使第一项“项 A”的文本显示为红色。

似乎项目列表是自动生成的，我不知道如何访问单个项目。

我有这个：

<v-select
    v-model="selected"
    :items="items"
    chips
    label="Some Items"
    multiple
    outlined
    cache-items
></v-select>

这是否可以使第一个条目“项目 A”显示为红色？如果，如何？

感谢您的帮助！

Answer 1

如果第一个项目不是真正的项目，例如全选，那么可以使用prepend-item 插槽来实现。见https://vuetifyjs.com/en/components/selects#prepend-append-item-slots。

要使第一个项目变为红色，您可以使用:first-child 选择器。可以使用menu-props 设置content-class 以将合适的CSS 类添加到菜单本身。

这个例子演示了这两种技术：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      items: ['Item A', 'Item B', 'Item C'],
      selected1: [],
      selected2: []
    }
  }
})

.red-text {
  color: red;
}

.red-first-item .v-list-item:first-child .v-list-item__title {
  color: red;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.19/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.19/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-select
          v-model="selected1"
          :items="items"
          chips
          label="Some Items"
          multiple
          outlined
          cache-items
        >
          <template v-slot:prepend-item>
            <v-list-item>
              <span class="red-text">Red item</span>
            </v-list-item>
          </template>
        </v-select>
        <v-select
          v-model="selected2"
          :items="items"
          chips
          label="Some Items"
          multiple
          outlined
          cache-items
          :menu-props="{ contentClass: 'red-first-item' }"
        >
        </v-select>
      </v-container>
    </v-content>
  </v-app>
</div>

另外，item 插槽可用于自定义所有项目的外观。不过这有点复杂，而且可能只是为了让一件物品变红而矫枉过正。

我建议浏览一下源代码：

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.ts

无论您是否了解所有内容都没有关系，您仍然可以深入了解组件是如何组合在一起的，以及它是如何构建菜单的。