触发子级和父级涟漪 [英] Child and parent ripple triggered
本文介绍了触发子级和父级涟漪的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 vuetify 设计一个卡片"组件.
我有一个带有子按钮的父 div.现在，当我单击按钮时，会触发 div 上的涟漪效应.
我该如何解决这个问题?
<div><v-card v-ripple="true"><h3><v-card-title>{{title }}</v-card-title><v-布局行><v-flex增长><v-card-text>{{ 普拉斯}}<br/>{{ 副标题 }}</v-card-text></v-flex><v-flex收缩><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></模板>
解决方案
解决方案确实是 Event.stopPropagation 但我不得不将其添加到 mousedown 操作中.所以 @mousedown.stop 然后用 @click.stop="null" 添加你的函数，正如前面提到的@Frank.
I'm using vuetify to design a 'card' component.
I have a parent div with a child button. Now, when I click the button, the ripple effect on the div is triggered.
How can I fix this?
<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>
解决方案
The solution was indeed Event.stopPropagation but I had to add it to the mousedown action.
So @mousedown.stop and then add your function with @click.stop="null" as @Frank mentioned before.
这篇关于触发子级和父级涟漪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
