单击action working on vuetify徽章
单击action working on vuetify徽章
提问于 2018-10-03 02:50:57
我们最近开始使用Vue和Vuetify。作为应用程序的一部分，我需要在Vuetify徽章上编写点击操作，但不确定为什么它不工作。我尝试了以下代码片段：
<v-badge bottom
left
overlap
:color="red">
<div slot="badge"
@click="togglePopover"
class="availability"></div>
<Avatar :objData="data.image"
:size="size"
:applyBoarder="applyBoarder">
<slot></slot>
</Avatar>
</v-badge>
<script>
export default {
methods: {
togglePopover(e) {
alert('click action');
}
}
</script>回答 4
Stack Overflow用户
发布于 2020-01-28 21:00:22
您应该在click事件上使用native修饰符。
@click.native="togglePopover"来自VueJS文档
.native -侦听组件根元素上的本机事件。
有关更多信息和所有可用修饰符，请单击此处：https://vuejs.org/v2/api/#v-on
Stack Overflow用户
发布于 2018-10-03 03:52:10
您可以使用v-btn代替徽章插槽的div
<v-badge>
<v-btn slot="badge" @click="togglePopover">
<v-icon>done</v-icon>
</v-btn>
</v-badge>
new Vue({
el: '#app',
methods: {
togglePopover() {
console.log('click');
}
}
})@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons);
@import url(https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css);
#app {
padding-top: 20px;
}<script src="https://unpkg.com/vue@2.5.17"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-badge
color="purple"
left
overlap
>
<v-btn slot="badge"
flat
icon
dark
small
:ripple="false"
@click="togglePopover">
<v-icon>done</v-icon>
</v-btn>
<v-icon
color="grey lighten-1"
large
>
account_circle
</v-icon>
</v-badge>
</div>
</v-app>
</div>
Stack Overflow用户
发布于 2021-03-15 19:02:48
对我来说，@tony19的答案不起作用，除非添加一个z索引
<v-badge
bordered
color="red"
overlap
>
<v-icon slot="badge" style="z-index: 1;" @click="doSomething">
mdi-close
</v-icon>
<v-img
class="rounded-lg"
height="100"
width="100"
aspect-ratio="1"
src="https://placekitten.com/g/300/300"
/>
</v-badge>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52614623
复制相关文章
相似问题
腾讯云开发者
