触发子级和父级涟漪

Question

我正在使用 vuetify 设计一个“卡片”组件。

我有一个带有子按钮的父 div。现在，当我单击按钮时，会触发 div 上的涟漪效应。

我怎样才能解决这个问题？

<template>

  <div>

    <v-card v-ripple="true">
      <h3>
        <v-card-title>{{ title }}</v-card-title>
      </h3>

      <v-layout row>
        <v-flex grow>
          <v-card-text>
            {{ plaats }}
            <br />
            {{ sub_title }}
          </v-card-text>
        </v-flex>

        <v-flex shrink>
          <v-card-actions>

            <v-btn small color="blue" fab>
              <v-icon medium color="white">mdi-calendar</v-icon>
            </v-btn>

            <v-btn small color="green" fab>
              <v-icon medium color="white">mdi-calendar-check</v-icon>
            </v-btn>

            <v-btn small color="red" fab>
              <v-icon medium color="white">mdi-calendar-remove</v-icon>
            </v-btn>

          </v-card-actions>
        </v-flex>

      </v-layout>
    </v-card>

  </div>

</template>

Answer 1

解决方案确实是，Event.stopPropagation但我必须将其添加到 mousedown 操作中。因此@mousedown.stop，然后使用@click.stop="null"前面提到的@Frank添加您的功能。