问题
<van-dropdown-menu>添加多个<van-dropdown-item>,最后添加会导致之前添加的弹框显示正常但点击事件无效,猜测是相互覆盖导致的。
效果:
本次下拉点击的item会导致上次下拉无法再次重新选择。
例如:
选用以上布局,进行以下操作:
1.先点击id为item1的下拉菜单,展开下拉选项进行选值
2.再点击id为item2的下拉菜单,展开下拉选项进行选值
3.再次点击id为item1的下拉菜单,展开下拉选项进行选值,无法执行选择动作,效果和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">
确认
</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">
确认
</van-button>
</view>
</van-dropdown-item>
点击确认按钮,关闭所有item:
this.cityShow = false;
this.goodsShow = false;