Vuetify 导航抽屉在单击时保持列表项的颜色

Question

我创建了一个导航抽屉，但无法实现在项目点击时保持背景。

我现在拥有的是自定义范围 css 的列表。

我想要实现的是单击时背景绿色保持不变。并根据我在默认背景和我的样式之间单击的任何位置更改列表项背景。

现在我的代码是这样的。

<v-navigation-drawer
          v-model="drawer"
          :mini-variant.sync="mini"
          height="100vh"
          permanent
          color="blue-grey darken-4"
        >
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
            </v-list-item-avatar>

            <v-list-item-title class="ListItemClass">
              John Leider
            </v-list-item-title>

            <v-btn
              icon
              @click.stop="mini = !mini"
              color="blue-grey lighten-5"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
          </v-list-item>

          <v-list-item class="mb-1 px-2">
            <v-list-item-icon>
              <v-btn
                icon
                @click.stop="mini = !mini"
                color="blue-grey lighten-5"
              >
                <v-icon>mdi-arrow-expand-horizontal</v-icon>
              </v-btn>
            </v-list-item-icon>
          </v-list-item>
          <div
            id="divider"
            style="background-color:#f5f5f5; height: 2px; width:80%;margin: 0 auto;;"
          />

          <v-list dense>
            <v-list-item
              class="SelectedTile"
              v-for="item in items"
              :key="item.title"
              link
            >
              <v-list-item-icon>
                <v-icon color="blue-grey lighten-5">
                  {{ item.icon }}
                </v-icon>
              </v-list-item-icon>

              <v-list-item-content color="blue-grey lighten-5">
                <v-list-item-title class="ListItemClass">
                  {{ item.title }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-navigation-drawer>

还有我的风格

<style scoped>
.ListItemClass {
  color: #f5f5f5;
}
.SelectedTile:hover {
    border-radius: 4px;
    background: #455A64
}
.SelectedTile:active {
    border-radius: 4px;
    background: rgba(10, 204, 117, 0.19)
}
</style>

我不知道该怎么做。

感谢帮助

Answer 1

如果您要为整个应用程序创建 v-navigation-drawer，最好在模板中更改一些内容。

希望您使用 vue-router 在页面之间导航。

您的 App.vue 应如下所示：

<template>
  <v-app>
    <v-navigation-drawer
      app
      ...another props
    >
      ...navigation-drawer internal data
    </v-navigation-drawer>
    
    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

使用这样的模板，您可以这样在 v-list-item 组件中使用 active-class 道具：

...
<v-list dense>
  <v-list-item
    class="SelectedTile"
    active-class="SelectedTile-active"
    v-for="item in items"
    :key="item.title"
    :to="item.path"
    link
  >
    <v-list-item-icon>
      <v-icon color="blue-grey lighten-5">
        {{ item.icon }}
      </v-icon>
    </v-list-item-icon>

    <v-list-item-content color="blue-grey lighten-5">
      <v-list-item-title class="ListItemClass">
        {{ item.title }}
      </v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>
...
<script>
export default {
  ...
  data() {
    return {
      ...
      items: [
        { title: "First", icon: "mdi-home", path: "/first" },
        { title: "Second", icon: "mdi-send", path: "/second" },
        { title: "Third", icon: "mdi-lock", path: "/third" },
      ],
    };
  },
};
</script>

<style scoped>
.ListItemClass {
  color: #f5f5f5;
}

.SelectedTile:hover {
    border-radius: 4px;
    background: #455A64
}

.SelectedTile-active {
  border-radius: 4px;
  background: rgba(10, 204, 117, 0.19)
}
</style>

检查此 demo at CodeSandbox。

如果由于某种原因您不能使用第一种方法，试试这个：

要创建一组可选择的 v-list-item，您可以将其包装到 v-list-item-group 组件中：

...
<v-list dense>
  <v-list-item-group
    v-model="selectedItem"
    active-class="SelectedTile-active"
    mandatory
  >
    <v-list-item
      class="SelectedTile"
      v-for="item in items"
      :key="item.title"
      link
    >
      <v-list-item-icon>
        <v-icon color="blue-grey lighten-5">
          {{ item.icon }}
        </v-icon>
      </v-list-item-icon>

      <v-list-item-content color="blue-grey lighten-5">
        <v-list-item-title class="ListItemClass">
          {{ item.title }}
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list-item-group>
</v-list>
...
data: () => ({
  ...
  selectedItem: 0,
})
...
<style scoped>
.ListItemClass {
  color: #f5f5f5;
}

.SelectedTile:hover {
    border-radius: 4px;
    background: #455A64
}

.SelectedTile-active {
  border-radius: 4px;
  background: rgba(10, 204, 117, 0.19)
}
</style>

但是如您所见，如果您在 v-list-item-group 组件中使用 mandatory 属性，则至少应 always 选择一项。

Answer 2

我是第二种情况，无法全局应用抽屉。

你的第二个选项稍作调整就很有效

我必须将 active-class="SelectedTile-active" 道具放在 v-list-item 级别

<v-navigation-drawer
  v-model="drawer"
  :mini-variant.sync="mini"
  height="100vh"
  permanent
  color="blue-grey darken-4"
>
  <v-list-item class="px-2">
    <v-list-item-avatar>
      <v-img :src="'data:'+UserData.avatardatatype+';base64,'+UserData.avatarcontent" />
      <!--<v-img src="https://randomuser.me/api/portraits/men/85.jpg" />-->
    </v-list-item-avatar>

    <v-list-item-title class="ListItemClass">
      {{ UserData.UserName }}
    </v-list-item-title>
    <v-btn
      icon
      @click.stop="mini = !mini"
      color="blue-grey lighten-5"
      class="pr-5"
    >
      <v-icon>mdi-chevron-left</v-icon>
    </v-btn>
  </v-list-item>

  <v-list-item class="mb-1 px-2">
    <v-list-item-icon>
      <v-btn
        icon
        @click.stop="mini = !mini"
        color="blue-grey lighten-5"
      >
        <v-icon>mdi-arrow-expand-horizontal</v-icon>
      </v-btn>
    </v-list-item-icon>
  </v-list-item>
  <div
    id="divider"
    style="background-color:#f5f5f5; height: 2px; width:80%;margin: 0 auto;"
  />

  <v-list shaped>
    <v-list-item-group
      v-model="selectedItem"
    >
      <template v-for="(item, i) in items">
        <v-list-item
          :key="i"
          :value="item"
          active-class="SelectedTile"
        >
          <v-list-item-icon>
            <v-icon color="blue-grey lighten-5">
              {{ item.icon }}
            </v-icon>
            <v-list-item-content color="blue-grey lighten-5">
              <v-list-item-title
                style="color:#ECEFF1;"
                class="mx-2"
                v-text="item.title"
              />
            </v-list-item-content>
          </v-list-item-icon>
        </v-list-item>
      </template>
    </v-list-item-group>
  </v-list>
</v-navigation-drawer>

Vuetify 导航抽屉在单击时保持列表项的颜色

Vuetify navigation drawer keep list item colored on click

css

navigation-drawer

vuetify.js