可点击的 V 卡，带有 V 菜单的排除区域

Question

我正在使用Vuetify的v-card。我想使卡片可点击，所以我使用了"to"属性。效果很好。问题是当我在右上角添加菜单时。当我单击卡的菜单时，它会像我单击运行其他内容的 v-card 一样计算它。

我试图将图像和文本放在 v-btn 中，但它所采用的所有其他 CSS 都不是一个真正的解决方案。我还尝试将图像和文本放在带有路由器链接的div 中，但菜单按钮的左侧不可单击。

基础设施是否有针对此类内容的解决方案？

这是组件的模板。

<v-card :to="'/' + card.name + '/launch'" exact tile>
<v-card-actions>
<v-menu auto offset-y>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, i) in card.menuItems" 
:key="i" @click="item.action">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-card-actions>
<v-img :src="card.image" class="mx-auto" width="72"></v-img>
<v-card-title class="pb-0 mb-3 justify-center" style="font-family:'Google Sans',Roboto,sans-serif; line-height:1.1;">{{ card.title }}</v-card-title>
<v-card-text class="text--secondary rtl">{{ card.content }}</v-card-text>
</v-card>

提前感谢！！

Answer 1

您可以使用菜单上的stop事件修饰符@click项操作，并在菜单上使用.prevent...

<v-card :to="'/launch'" exact tile>
<v-card-actions>
<v-menu auto offset-y>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" v-on:click.prevent>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, i) in items" :key="i" @click.stop="item.action">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-card-actions>
<v-img src="//placehold.it/200" class="mx-auto" width="72"></v-img>
<v-card-title class="pb-0 mb-3 justify-center" style="font-family:'Google Sans',Roboto,sans-serif; line-height:1.1;">Title</v-card-title>
<v-card-text class="text--secondary rtl">Card text...</v-card-text>
</v-card>

https://codeply.com/p/viy24oqC2j