Question

我想更改v-list标头项目的颜色。我似乎只能更改标题的颜色，但不能更改整个图块。请注意，我需要使它具有反应性，因为我要更改的背景颜色不会随着时间的推移保持不变。

我尝试在v-list-tile-content上使用color属性，但是它什么也没做。然后我在v-list-tile-title上尝试了相同的操作，但这只更改了标题部分，而不是操作/头像部分

换句话说，就像在以下代码笔https://codepen.io/patrick2009/pen/pmdgNz

中更改Dining标题的颜色一样

 <v-list-tile-content color="red">
     <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
 </v-list-tile-content>

那样的事情会很好！

谢谢大家

拍子

Answer 1

编辑： ：我更新了答案，以显示如何使用css动态添加props。

示例：

const myList = {
  template: "#my-list",
  props: ["color", "hover"],
  mounted() {
    var css = `
    .v-list__group__header { 
      background-color: ${this.color};
    }
    .v-list__group__header:hover {
      background-color: ${this.hover} !important;
    }
    `;
    var style = document.createElement("style");
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    document.getElementsByTagName("body")[0].appendChild(style);
  },
  data() {
    return {
      items: [{
          action: "local_activity",
          title: "Attractions",
          items: [{
            title: "List Item"
          }]
        },
        {
          action: "restaurant",
          title: "Dining",
          active: true,
          items: [{
              title: "Breakfast & brunch"
            },
            {
              title: "New American"
            },
            {
              title: "Sushi"
            }
          ]
        },
        {
          action: "school",
          title: "Education",
          items: [{
            title: "List Item"
          }]
        },
        {
          action: "directions_run",
          title: "Family",
          items: [{
            title: "List Item"
          }]
        },
        {
          action: "healing",
          title: "Health",
          items: [{
            title: "List Item"
          }]
        },
        {
          action: "content_cut",
          title: "Office",
          items: [{
            title: "List Item"
          }]
        },
        {
          action: "local_offer",
          title: "Promotions",
          items: [{
            title: "List Item"
          }]
        }
      ]
    };
  }
};

new Vue({
  el: "#app",
  components: {
    myList
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <my-list color="red" hover="blue"></my-list>
      </v-flex>
    </v-layout>
  </v-app>
</div>

<script type="text/x-template" id="my-list">
  <v-card>
    <v-toolbar color="teal" dark>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Topics</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>
    </v-toolbar>
    <v-list>
      <v-list-group v-for="item in items" :key="item.title" v-model="item.active" :prepend-icon="item.action" no-action>
        <template v-slot:activator>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
           </v-list-tile>
         </template>
        <v-list-tile v-for="subItem in item.items" :key="subItem.title" @click="">
          <v-list-tile-content color="red">
            <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
          </v-list-tile-content>
          <v-list-tile-action>
            <v-icon>{{ subItem.action }}</v-icon>
          </v-list-tile-action>
        </v-list-tile>
      </v-list-group>
    </v-list>
  </v-card>
</script>

[CodePen Mirror]

旧答案：

好像您必须通过css对该类进行设置。您要定位的类是v-list__group__header。

编辑： ：您还可以使用:hover“事件”更改悬停时的background-color-不幸的是，这需要您使用!important修饰符，通常不赞成使用。想通了，我会提起它。

.v-list__group__header:hover {
  background-color: blue !important;
}

更改v-list标头的背景颜色

1 个答案: