0
点赞
收藏
分享

微信扫一扫

python自学笔记

青鸾惊鸿 2024-09-24 阅读 25

文章目录


需求

我如何用代码来实现 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 里,然后在其他组件中拿到这个 菜单的实例,即可全局调用这个方法了!

举报

相关推荐

0 条评论