英文:
How to open a dialog when clicking a card but prevent opening the dialog when clicking child elements?
问题
我正在使用最新版本的Vuetify,并希望在单击卡片时打开对话框。问题是这个卡片包含多个子元素(例如一个表单),我只想在单击卡片本身时打开对话框。
对话框在单击卡片时打开,但也在单击卡片内的其他内容时打开,例如文本字段或按钮。有没有办法只在单击卡片时打开对话框?
英文:
I'm using the latest Version of Vuetify and want to open a dialog when I click on a card. The problem is that this card contains multiple child elements ( e.g. a form ) and I only want to open a dialog when the card itself had been clicked.
<template>
<v-app>
<v-main>
<v-dialog v-model="isDialogOpen">
<template v-slot:activator="{ props }">
<!-- <v-btn v-bind="props">Open Dialog</v-btn> -->
<v-card v-bind="props">
<v-card-title>If (only) card was clicked it should open a dialog</v-card-title>
<v-card-text>
<v-form>
<v-text-field label="This is just" />
<v-text-field label="a very basic form" />
<v-text-field label="inside a card" />
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Some action</v-btn>
<v-spacer />
<v-btn>Other action</v-btn>
</v-card-actions>
</v-card>
</template>
<v-card>Dialog goes here</v-card>
</v-dialog>
</v-main>
</v-app>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDialogOpen = ref(false)
</script>
The dialog opens when clicking on the card but it also opens when clicking something inside the card, e.g. the text fields or the buttons.
Is there a way to only open the dialog when clicking the card?
答案1
得分: 1
在你不希望点击事件冒泡的元素上放置 @click.stop
。
演示示例。
文档:事件修饰符。
注意:如果你将 @click.stop
放在卡片的直接子元素上(这就是你要求的),你将无法再打开对话框,因为卡片的整个表面都被覆盖了:<v-card-title />
、<v-card-text />
和 <v-card-actions />
,实际上没有像素可以点击以打开对话框。
英文:
Place @click.stop
on the elements on which you don't want the click to bubble.
Documentation: event modifiers.
Note: if you place @click.stop
on the card's immediate children (which is what you asked for), you won't be able to open the dialogue anymore as the entire surface of the card is covered by: <v-card-title />
, <v-card-text />
and <v-card-actions />
, effectively leaving no pixel where a click would actually open the dialogue.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论