---

需求

我如何用代码来实现 ElementPlus 的菜单的展开和收缩呢？

几次探索

• 尝试通过找到节点之后，使用 click 事件，失败了

  // 伪代码如下
  const handleFindNodeAndClick = () => {console.log('handleFindNodeAndClick');const node:any = document.querySelector('.el-menu')console.log('node:>>', node);if (node) {const children = node.children;console.log('children:>>', children);children[2].click()}
  }
  

• 尝试模拟鼠标点击事件，失败了

  // 大致思路如下
  const menuItem = document.querySelector('.menu-item');// 创建一个鼠标事件
  const event = new MouseEvent('click', {bubbles: true,cancelable: true,view: window
  });// 派发鼠标事件
  menuItem.dispatchEvent(event);
  

官网寻找线索（解决办法）

不得已去官网上翻翻看，看到个这个 Menu Exposes，看着说明很像是我的需求啊，但是不太会用呢

然后，我来到了这个后台管理框架的 Layout 找到了这个组件，找到了这个组件，打印了它的 ref 一看！

在浏览器里看看

可以简单测试一下

效果出来了

那么可以把这个 ref 放到 Store 里，然后在其他组件中拿到这个 菜单的实例，即可全局调用这个方法了！