如何在点击卡片时打开对话框,但防止在点击子元素时打开对话框?

huangapple go评论62阅读模式
英文:

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.

Reproduction link

<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.

Working demo.

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: &lt;v-card-title /&gt;, &lt;v-card-text /&gt; and &lt;v-card-actions /&gt;, effectively leaving no pixel where a click would actually open the dialogue.

huangapple
  • 本文由 发表于 2023年1月9日 01:20:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75049872.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定