背景
小程序里內(nèi)嵌的h5單頁，框架用的vant3，做選擇彈窗的時候封裝了一個組件柜去，彈窗里選擇支付方式灰嫉，點擊確定觸發(fā)confirm方法。
// 組件內(nèi)容
<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>
// 頁面內(nèi)容
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里面表現(xiàn)良好诡蜓，handleSubmit方法觸發(fā)一次熬甫，可是發(fā)到測試之后在小程序里打開發(fā)現(xiàn)handleSumit觸發(fā)了兩次。
調(diào)試之后發(fā)現(xiàn)是由于我的組件里VanDialog放在了根路徑上蔓罚，跟vandialog本身的事件名稱一樣椿肩，所以掛載了兩次confirm事件。豺谈。郑象。
解決方案
- 把confirm事件改為onConfirm
- 根路徑加一個div
