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

背景

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

遇到的问题

参考网络elementui下拉菜单不同选项支持点击后是否隐藏菜单栏             ，

给el-dropdown-menu 设置ref="dropdownRef"
  
 
  
 
  
 
  
 
  
 
  
 
 ，通过this.$refs.dropdownRef.showPopper = false关闭； this.$refs.dropdownMenuRef.showPopper = false; 按照上述操作












，实际开发过程中 
  
  
  
  
  
  ，发现点击打开下拉菜单的按钮
  
  
  
  
  
  
 ，点击取消
 


 


 


 


 


 


，确实关闭了

解决

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下拉菜单不同选项支持点击后是否隐藏菜单栏