发布时间:2022-12-26 文章分类:编程知识 投稿人:王小丽 字号: 默认 | | 超大 打印

elementui|dropdown|下拉菜单作为模态框使用

背景

  1. 场景:下拉菜单作为模态框使用:
  2. 操作:下拉菜单设置触发条件点击展示/隐藏:trigger="click"
  3. 目的:点击取消关闭下拉框
    elementui|dropdown|下拉菜单作为模态框使用

遇到的问题

  1. 参考网络elementui下拉菜单不同选项支持点击后是否隐藏菜单栏,
    el-dropdown-menu 设置ref="dropdownRef",通过this.$refs.dropdownRef.showPopper = false关闭;
this.$refs.dropdownMenuRef.showPopper = false;
  1. 按照上述操作,实际开发过程中,发现点击打开下拉菜单的按钮,点击取消,确实关闭了

解决

1.看elementui源码,发现dropdown按钮所在组件中有属性visible;
2.给el-dropdown添加属性ref="dropdownRef",置 visible 为 false;
3.给el-dropdown-menu添加属性ref="dropdownMenuRef",置 showPopper 为 false。

this.$refs.dropdownRef.visible = false;
this.$refs.dropdownMenuRef.showPopper = false;

参考链接

elementui下拉菜单不同选项支持点击后是否隐藏菜单栏