vue.js - 如何使用悬停事件使其在元素中的 v-menu 工作
问题描述
<template>
<v-hover v-slot:default="{ hover }">
<div class="img-card">
<div class="img-wrapper">
<img :src="url" alt="image of gallery" />
<transition name="fade">
<div class="cover" :class="{ 'cover-active': hover }">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-bind="attrs"
v-on="on"
solo
append-icon="mdi-chevron-down"
label="Regular"
class="menu"
></v-text-field>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<div class="under-wrapper">
<v-btn fab small color="#fff">
<v-icon>mdi-upload</v-icon>
</v-btn>
<v-btn fab small color="#fff">
<v-icon>mdi-dots-horizontal</v-icon>
</v-btn>
</div>
</div>
</transition>
</div>
<p>{{ author }}</p>
</div>
</v-hover>
</template>
<script>
export default {
name: 'ImgCard',
props: ['url', 'author'],
data() {
return {
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.img-card {
}
.img-wrapper {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.cover {
display: none;
background: rgba($color: #222, $alpha: 0.3);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
}
.cover-active {
display: block;
}
.menu {
width: 100%;
border-radius: 12px;
}
img {
display: block;
}
p {
font-weight: bold;
}
//animation
.fade-enter-active,
.fade-leave-active {
transition: opcity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
我希望使用 Vue、Vuetify、v-menu、v-hover、mouseevnet 制作像 pinterest 的图像卡这样的组件
我认为它会起作用,但它有点模棱两可。'v-menu__content' 在元素之外呈现并添加鼠标事件,然后它工作很奇怪。
如果我在“img-card”上添加功能并尝试将鼠标悬停在下拉菜单上,它就会消失..因为下拉菜单在“img-card”之外,或者它反复打开和关闭。
我想修复不自然的东西。我只是放弃使用'v-menu'吗?-_-
如果我的问题缺乏内容,请告诉我。
解决方案
也许这有帮助
当我将鼠标悬停在
<v-tooltip top max-width="500">
<template v-slot:activator="{ on }">
<v-icon v-on="on">info_outlined</v-icon>
</template>
<span>
EXAMPLE TEXT
</span>
</v-tooltip>