Vuetify导航抽屉保持列表项目在单击时着色
Vuetify导航抽屉保持列表项目在单击时着色
提问于 2022-02-12 12:53:31
我已经创建了一个导航抽屉，但无法实现保持背景在项目点击。
我现在拥有的是自定义作用域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>我想不出怎么做。
谢谢你的帮助
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-12 15:00:38
如果您要为整个应用程序创建v-navigation-drawer，最好是更改模板中的某些内容。
我希望您正在使用vue-路由器在页面之间导航。
您的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>使用这样的模板，您可以这样在您的active-class组件中使用一个v-list-item支柱：
...
<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>看看这个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组件中使用v-list-item-group支柱，则至少应该选择始终是的一个项。
Stack Overflow用户
发布于 2022-02-14 12:50:46
在第二种情况下，我没有任何可能在全球范围内使用抽屉。
你的第二个选择就像一个有一点调整的魅力。
我必须将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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71092015
复制相关文章
相似问题
腾讯云开发者
