Vuetify - 列表菜单激活器可见性切换
Vuetify - List menu activator visibility toggle
我有 3 张卡片,当鼠标悬停在卡片标题上时,它显示一个 arrow_down 图标,我可以点击它,当我将鼠标悬停在 v-card-title 上时,它是一个具有删除功能的下拉菜单显示图标,但在我点击它后,鼠标在 drop-down 菜单上 arrow_down 图标消失了,
如何正确实施?
https://codepen.io/sharon-the-encoder/pen/WLWyoG?editors=0010
const cards = [
{
title: "Gooey PBJ Brownies",
author: "John Walibur",
image: "https://placeimg.com/640/480/nature"
},
{
title: "Crisp Spanish Tortilla Matzo Brei",
author: "Colman Andrews",
image: "https://placeimg.com/640/480/animals"
},
{
title: "Grilled Shrimp with Lemon and Garlic",
author: "Celeste Mills",
image: "https://placeimg.com/640/480/arch"
}
];
new Vue({
el: "#app",
data: {
cards: cards,
selectedCard: -1
},
methods: {
hoverCard(selectedIndex) {
this.selectedCard = selectedIndex
},
isSelected(cardIndex) {
return this.selectedCard === cardIndex
},
passmsgid(index) {
alert(index)
}
}
});
body {
background-color: #e1e7e7;
}
.grey--text.selected {
color: red !important;
}
.iconkey {
display: none;
}
.iconkey.selected {
display: block;
color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.4.2/vuetify.min.js">
</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<div id="app">
<v-app>
<v-content>
<v-container>Hello world</v-container>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 sm4 md4 lg4 v-for="(card, index) in cards" :key="index">
<v-card class="ml-3 mt-3">
<v-img :src="card.image" height="200px">
</v-img>
<v-card-title primary-title @mouseover="hoverCard(index)" @mouseout="hoverCard(-1)">
<div>
<div class="headline">{{card.title}}</div>
<span class="grey--text" :class="{'selected': isSelected(index)}">{{card.author}} -
</span>
<v-expand-transition>
<v-menu bottom transition="scale-transition" nudge-bottom="40">
<v-btn icon slot="activator" styole="margin-bottom: -1em;">
<v-icon class="iconkey" :class="{'selected': isSelected(index)}">keyboard_arrow_down</v-icon>
</v-btn>
<v-list>
<v-list-tile>
<v-list-tile-title @click="passmsgid(index)">Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-expand-transition>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat color="purple">Explore</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
使用更多 CSS 且不使用 v-hover
的更新笔:Codepen
(最初我使用 v-hover 但对于这种情况不需要)
Codepen
我们将使用以下 CSS class 来控制可见性:
.hidden {
visibility: hidden;
}
菜单按钮被隐藏,除非:
a) 我们将鼠标悬停在其父图块上或
b) 打开相应菜单时。
所以我们需要设置自定义项目(tile)组件:
设置菜单可见性控制:
data: () => ({
menu: false, // control button-menu state (opened / closed)
})
我们的模板以 v-hover
组件开头,因此我们可以检测何时将鼠标悬停在它上面并对事件做出反应:
<template>
<v-hover>
<v-list-tile slot-scope="{ hover }" @click="">
// ...
<v-menu v-model="menu" offset-y left >
<v-btn slot="activator"
:class="{hidden: !hover && !menu}"
>
:class="{hidden: !hover && !menu}"
- 我们在按钮上设置 hidden
class 当我们没有将鼠标悬停在父图块上并且相应的菜单关闭时。
我有 3 张卡片,当鼠标悬停在卡片标题上时,它显示一个 arrow_down 图标,我可以点击它,当我将鼠标悬停在 v-card-title 上时,它是一个具有删除功能的下拉菜单显示图标,但在我点击它后,鼠标在 drop-down 菜单上 arrow_down 图标消失了, 如何正确实施?
https://codepen.io/sharon-the-encoder/pen/WLWyoG?editors=0010
const cards = [
{
title: "Gooey PBJ Brownies",
author: "John Walibur",
image: "https://placeimg.com/640/480/nature"
},
{
title: "Crisp Spanish Tortilla Matzo Brei",
author: "Colman Andrews",
image: "https://placeimg.com/640/480/animals"
},
{
title: "Grilled Shrimp with Lemon and Garlic",
author: "Celeste Mills",
image: "https://placeimg.com/640/480/arch"
}
];
new Vue({
el: "#app",
data: {
cards: cards,
selectedCard: -1
},
methods: {
hoverCard(selectedIndex) {
this.selectedCard = selectedIndex
},
isSelected(cardIndex) {
return this.selectedCard === cardIndex
},
passmsgid(index) {
alert(index)
}
}
});
body {
background-color: #e1e7e7;
}
.grey--text.selected {
color: red !important;
}
.iconkey {
display: none;
}
.iconkey.selected {
display: block;
color: blue !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.4.2/vuetify.min.js">
</script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<div id="app">
<v-app>
<v-content>
<v-container>Hello world</v-container>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 sm4 md4 lg4 v-for="(card, index) in cards" :key="index">
<v-card class="ml-3 mt-3">
<v-img :src="card.image" height="200px">
</v-img>
<v-card-title primary-title @mouseover="hoverCard(index)" @mouseout="hoverCard(-1)">
<div>
<div class="headline">{{card.title}}</div>
<span class="grey--text" :class="{'selected': isSelected(index)}">{{card.author}} -
</span>
<v-expand-transition>
<v-menu bottom transition="scale-transition" nudge-bottom="40">
<v-btn icon slot="activator" styole="margin-bottom: -1em;">
<v-icon class="iconkey" :class="{'selected': isSelected(index)}">keyboard_arrow_down</v-icon>
</v-btn>
<v-list>
<v-list-tile>
<v-list-tile-title @click="passmsgid(index)">Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-expand-transition>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat color="purple">Explore</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
使用更多 CSS 且不使用 v-hover
的更新笔:Codepen
(最初我使用 v-hover 但对于这种情况不需要) Codepen
我们将使用以下 CSS class 来控制可见性:
.hidden {
visibility: hidden;
}
菜单按钮被隐藏,除非:
a) 我们将鼠标悬停在其父图块上或
b) 打开相应菜单时。
所以我们需要设置自定义项目(tile)组件:
设置菜单可见性控制:
data: () => ({
menu: false, // control button-menu state (opened / closed)
})
我们的模板以 v-hover
组件开头,因此我们可以检测何时将鼠标悬停在它上面并对事件做出反应:
<template>
<v-hover>
<v-list-tile slot-scope="{ hover }" @click="">
// ...
<v-menu v-model="menu" offset-y left >
<v-btn slot="activator"
:class="{hidden: !hover && !menu}"
>
:class="{hidden: !hover && !menu}"
- 我们在按钮上设置 hidden
class 当我们没有将鼠标悬停在父图块上并且相应的菜单关闭时。