时间戳

首页 > 解决方案 > 将类添加到 Vuetify 的 v-select 组件的第一项

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

问题描述

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

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

我有这个：

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

v-选择示例

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

谢谢你的帮助！

标签： javascriptvue.jsvuetify.js

解决方案

如果第一个项目不是真正的项目，例如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

不管你是否了解所有这些，你仍然可以对组件如何组合在一起以及它如何构建菜单有所了解。

推荐阅读