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

Question

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

似乎项目列表以某种方式自动生成，我不知道如何访问单个项目。

我有这个：

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

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

谢谢你的帮助！

Answer 1

如果第一个项目不是真正的项目，例如Select all，则可以使用prepend-item插槽来实现。请参阅https://vuetifyjs.com/en/components/selects#prepend-append-item-slots。

要使第一项变为红色，您可以使用:first-child选择器。一个content-class可以使用设置menu-props到合适的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

不管您是否理解所有内容，您仍然可以深入了解组件是如何组合在一起的，以及它是如何构建菜单的。