VUE vant组件 van-dropdown-menu下拉菜单 实现自动收起
在van-dropdown-item下拉菜单选项中嵌套了Cell组件 代码如图<van-dropdown-menu><van-dropdown-item v-bind:title="dropdownItemTitle" ref="item"><van-cell-group><van-cellis-linkv-for="item in equipCe
·
在van-dropdown-item下拉菜单选项中嵌套了Cell组件 代码如图
<van-dropdown-menu>
<van-dropdown-item v-bind:title="dropdownItemTitle" ref="item">
<van-cell-group>
<van-cell
is-link
v-for="item in equipCells"
:key="item.equipId"
v-bind:title="item.equipName"
v-bind:value="item.equipId"
v-bind:label="item.equipNo"
@click="choseEquip(item.equipId, item.equipNo, item.equipName)"/>
</van-cell-group>
</van-dropdown-item>
</van-dropdown-menu>
发现点击选择单元格后,下拉菜单并不会主动收起。然后我灵机一动,发现可以点击下拉菜单以外的组件元素实现下拉菜单收起,所以只需要手动给其他元素创建点击事件即可实现
choseEquip(equipId, equipNo, equipName) {
this.dropdownItemTitle = `${equipName}-${equipNo}`;
this.equipId = equipId;
this.equipNo = equipNo;
this.equipName = equipName;
this.handleMoreLoading();
// 模拟主元素点击事件,实现选择后下拉菜单收起
const e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
document.getElementById('panel').dispatchEvent(e);
},
更多推荐
已为社区贡献2条内容
所有评论(0)