vuetify：单击时停止父动画

Question

我有一张有 2 个按钮的卡片，我想在点击时有不同的功能：

1. 卡
2. 按钮Yes
3. 按钮No

我是这样布置卡片的

<v-card
  @click.self="$emit('card:clicked')"
>
    <v-card-actions>
      <v-spacer/>
      <v-btn
        @click.stop="$emit('btn:yes')"
      >
        Yes
      </v-btn>
      <v-btn
        @click.stop="$emit('btn:no')"
      >
        No
      </v-btn>
    </v-card-actions>
</v-card>

使用修饰符stop我可以在卡片上发出btn:yes或btn:no事件而不在卡片上发出事件card:clicked，但是卡片上的点击动画仍然显示并且非常混乱。

我的问题是，当我点击按钮而不是卡片时，如何停止动画就像停止事件 card:clicked 一样。

Answer 1

经过更多搜索后，我发现 animation 使用 vuetify 调用 ripple。

用正确的话我可以在Child and parent ripple triggered找到答案

我可以通过添加@mousedown.stop 来解决我的问题，如下所示

<v-card
  @click.self="$emit('card:clicked')"
>
    <v-card-actions>
      <v-spacer/>
      <v-btn
        @click.stop="$emit('btn:yes')"
        @mousedown.stop
      >
        Yes
      </v-btn>
      <v-btn
        @click.stop="$emit('btn:no')"
        @mousedown.stop
      >
        No
      </v-btn>
    </v-card-actions>
</v-card>