Vant的Field组件插槽插入button后,@click后重复消费问题

2022-05-12 13点热度 0人点赞 0条评论

问题描述

使用Vant做一个Field,点击Field的前面部分,触发catClicked,弹出Picker选择框;另外右侧使用插槽放置了一个按钮,也可以使用触发里面的addCatClicked方法。

代码如下:

<van-field
:value="cat"
@click="catClicked"
readonly
placeholder="请选择分类"
>
<template #button>
<van-button size="mini" icon="plus" type="info" @click="addCatClicked" style="background: #CBECFC;color:#0FAEFE;border:unset;padding: 0 4px;">添加分类</van-button>
</template>
</van-field>

会发现这样的问题,点了里面的添加分类Button后,最外面的catClicked也被触发了

解决办法

这是因为事件冒泡的原因,要阻止冒泡,我一开始使用了@click.prevent无效,正确的姿势是:@click.stop="addCatClicked"

button代码如下:

<van-button size="mini" icon="plus" type="info" @click.stop="addCatClicked" style="background: #CBECFC;color:#0FAEFE;border:unset;padding: 0 4px;">添加分类</van-button>

 

admin

这个人很懒,什么都没留下

文章评论

*

code