小程序学习日志

多个van-dropdown-item布局,相互覆盖无法点击

2021-06-29  本文已影响0人  Joh蜗牛
问题

<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;
上一篇下一篇

猜你喜欢

热点阅读