vant 多个DropdownMenu重叠问题

马小鹿啊

于 2020-11-30 10:24:43 发布

阅读量1.9k

点赞数 1

分类专栏： vant 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/sophia_xiaoma/article/details/110371112

版权

vant 专栏收录该内容

1 篇文章

订阅专栏

在Vue应用中，当多个DropdownMenu组件上下排列时，如果不选择下方下拉框直接点击上方的，会出现下拉菜单重叠的bug。通过使用`ref`属性获取DropdownItem实例，并结合`toggle`方法，可以实现在打开一个下拉菜单时关闭另一个，从而避免重叠。具体实现方式是在每个DropdownItem上设置ref，然后在open方法中根据tag切换不同下拉框的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：

页面从上到下多个DropdownMenu，点击下方下拉框不选择任何数据，直接再点击上方下拉框，会出现下拉框重叠问题，如图：

方法：

通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见组件实例方法

例：

<van-dropdown-menu>
  <van-dropdown-item ref="dropdown0" v-model="value0“ :options="option0" @open="open('dropdowm0')" />
</van-dropdown-menu>
<van-dropdown-menu>
  <van-dropdown-item ref="dropdown1" v-model="value1" :options="option1" @open="open('dropdowm1')"  />
</van-dropdown-menu>



open(tag){
    switch(tag){
        case 'dropdown0':
            this.$refs.dropdown1.toggle(false);
        case 'dropdown1':
            this.$refs.dropdown0.toggle(false);
    }
}