小程序内嵌vant h5页面,组件触发事件错误
2022-11-09 本文已影响0人
drneilc
背景
小程序里内嵌的h5单页,框架用的vant3,做选择弹窗的时候封装了一个组件,弹窗里选择支付方式,点击确定触发confirm方法。
// 组件内容
<template lang="pug">
VanDialog(v-model:show='showDialog', title='支付方式', show-cancel-button, @cancel='showDialog = false', @confirm='handleSubmit')
.pt-4.pb-10.px-8
.brs-8.bgc-html.mt-6.py-4.px-6.flex.aic.jcb(
v-for='(item, index) in payList',
:key='index',
:class='item.value === payType ? "c-theme" : "c-disabled"',
@click='payType = item.value'
)
.fwb {{ item.label }}
.iconfont {{ item.value === payType ? "" : "" }}
</template>
// 页面内容
ChoosePayType(v-model="showDialog" @confirm="handleSubmit")
const handleSubmit = async (payType: string) => {
try {
const { res } = await confirmOrder({ regAppointmentId: orderId.value, payType });
if (res) {}
} catch (error) {
console.log(error);
}
};
问题
在h5里面表现良好,handleSubmit方法触发一次,可是发到测试之后在小程序里打开发现handleSumit触发了两次。
调试之后发现是由于我的组件里VanDialog放在了根路径上,跟vandialog本身的事件名称一样,所以挂载了两次confirm事件。。。
解决方案
- 把confirm事件改为onConfirm
- 根路径加一个div