問題
<van-dropdown-menu>添加多個<van-dropdown-item>,最后添加會導(dǎo)致之前添加的彈框顯示正常但點擊事件無效荒澡,猜測是相互覆蓋導(dǎo)致的报辱。
效果:
本次下拉點擊的item會導(dǎo)致上次下拉無法再次重新選擇。
例如:
選用以上布局单山,進行以下操作:
1.先點擊id為item1的下拉菜單碍现,展開下拉選項進行選值
2.再點擊id為item2的下拉菜單幅疼,展開下拉選項進行選值
3.再次點擊id為item1的下拉菜單,展開下拉選項進行選值昼接,無法執(zhí)行選擇動作爽篷,效果和disabled一樣
解決方法:
加個樣式,即可解決慢睡。
代碼如下:
<van-dropdown-item
id="city"
title="地市"
:style="{ display: cityShow ? 'block' : 'none' }"
@close="cityShow = false"
@open="cityShow = true"
>
<view style="padding: 5px 16px">
<van-button type="danger" block round @click="reloadSearchData">
確認(rèn)
</van-button>
</view>
</van-dropdown-item>
<van-dropdown-item
id="goods"
title="商品"
:style="{ display: goodsShow ? 'block' : 'none' }"
@close="goodsShow = false"
@open="goodsShow = true"
>
<view style="padding: 5px 16px">
<van-button type="danger" block round @click="reloadSearchData">
確認(rèn)
</van-button>
</view>
</van-dropdown-item>
點擊確認(rèn)按鈕逐工,關(guān)閉所有item:
this.cityShow = false;
this.goodsShow = false;