【已解决】ElementPlus 的 el-menu 组件如何用 js 控制展开某个子菜单,并在其他组件中控制使用呢?

news2024/12/23 6:28:19

文章目录

  • 需求
  • 几次探索
  • 官网寻找线索(解决办法)


需求

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2158620.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】散列(哈希)表简单介绍

散列表也叫做哈希表(Hash table),散列表通过关键码和存储地址建立唯一确定的映射关系,能够快速查找到对应的元素,排序算法中的计数排序就是一种利用哈希进行排序的算法。 一、散列表的概念 散列表(Hash ta…

【优选算法之前缀和】No.6--- 经典前缀和算法

文章目录 前言一、前缀和例题模板:1.1 【模板】前缀和1.2 【模板】⼆维前缀和1.3 寻找数组的中⼼下标1.4 除⾃⾝以外数组的乘积1.5 和为 K 的⼦数组1.6 和可被 K 整除的⼦数组1.7 连续数组1.8 矩阵区域和 前言 👧个人主页:小沈YO. &#x1f6…

提升晶振电路抗扰性:优化方案解析

在现代电子设备中,晶振作为提供稳定时钟信号的核心组件,其稳定性对整个系统的运行至关重要。然而,电路抗扰性不良往往会导致晶振失效,进而影响设备的整体性能。晶发电子针对这一问题,提出了以下关于晶振电路抗扰性及优…

【C++】拆分详解 - string类

文章目录 一、为什么学习string类?二、标准库中的string类  1. 定义  2. 常用接口说明     2.1 构造     2.2 容量操作     2.3 访问及遍历操作     2.4 修改操作     2.5 非成员函数 三、OJ练习自测  [1. 仅仅反转字母](https://leetcod…

9.23 My_string.cpp

my_string.h #ifndef MY_STRING_H #define MY_STRING_H#include <iostream> #include <cstring>using namespace std;class My_string { private:char *ptr; //指向字符数组的指针int size; //字符串的最大容量int len; //字符串当前…

华为三折叠一拆,苹果脸被打肿了!

文&#xff5c;琥珀食酒社 作者 | 随风 哎呀 苹果这次脸真是被华为狠狠打肿了 那些高高兴兴买iPhone 16的 东西一收到&#xff0c;脸马上就绿了啊 各种意想不到的问题啊 拆开手机后发现有两处掉漆咱就不说了 第一次滑动iPhone 16 Pro屏幕有响应 再滑动就没有响应了咱也…

【27】C++项目练习

练习1 题目如下 代码如下 .h #pragma once #include <string> using namespace std;class Toy { public:Toy();Toy(string name,int price,string place);~Toy();string getName() const;int getPrice() const;string getPlace() const;void changePrice(float count)…

自己开发的windows服务在虚拟机上不能正常启用

最近开发了个数据采集系统&#xff0c;在我本机上发布、安装是没有问题的&#xff1b;但是在虚拟机上进行安装部署的时候&#xff0c;反馈的错误码是1053&#xff0c;服务不能正常启动。 网上搜索可能的原因&#xff0c;如图&#xff1a; 能引起1053的问题比较多&#xff0c;首…

springboot实战学习笔记(4)(Spring Validation参数校验框架、全局异常处理器)

接着上篇博客学习。上篇博客是已经基本完成用户模块的注册接口的开发。springboot实战学习笔记&#xff08;3&#xff09;(Lombok插件、postman测试工具、MD5加密算法、post请求、接口文档、注解、如何在IDEA中设置层级显示包结构、显示接口中的方法)-CSDN博客本篇博客主要是关…

最新版Visual Studio安装教程(超详细,新手必看)

一、官网下载 这里奉上Visual Studio官方下载地址&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/https://visualstudio.microsoft.com/zh-hans/downloads/ 对于我们学习来说&#xff0c;下载第一个社区免费版即可&#xff0c;点击下载。 下载完成以后是…

Kubernetes Pod调度基础(kubernetes)

实验环境依旧是k8s快照&#xff0c;拉取本次实验所需的镜像文件&#xff1b; 然后在master节点上传已经编写好的yaml文件&#xff1b; 然后同步会话&#xff0c;导入镜像&#xff1b; pod控制器&#xff1a; 标签选择器--》标签&#xff1a; 标签&#xff1a; 在Kubernetes&…

还在用windows自带录屏?试试这三款录屏工具

作为一名办公室文员&#xff0c;我经常需要录制电脑屏幕来制作教程或者记录工作流程。在众多的录屏工具中&#xff0c;我尝试了四款不同的录屏工具&#xff0c;包括Windows自带录屏工具。今天&#xff0c;我就来跟大家分享一下我的使用体验&#xff0c;希望能帮助到和我有同样需…

利用代码,玩转腾讯云脱敏服务:Java、Python、PHP案例集

腾讯云数据脱敏服务-数据管理的优势是什么&#xff1f; 腾讯云数据脱敏服务-数据管理 提供了一种高效且灵活的方式来保护敏感数据。其核心优势在于可以在数据处理和传输过程中自动化地执行数据脱敏操作。无论是脱敏信用卡号、身份证号还是其他个人信息&#xff0c;该服务都能精…

Games101笔记-二维Transform变换(二)

1、什么是Transform Transform就是通过一个矩阵&#xff0c;进行缩放、旋转、平移等变换 2、缩放、旋转、切变、平移等基础变换 缩放变换&#xff1a; 反射变换&#xff1a; 切变&#xff1a; 绕原点旋转&#xff1a; 以上都是线性变换&#xff1a; 平移变换&#xf…

线程同步:消费者模型(非常重要的模型)

一.线程同步的概念 线程同步&#xff1a;是指在互斥的基础上&#xff0c;通过其它机制实现访问者对 资源的有序访问。条件变量&#xff1a;线程库提供的专门针对线程同步的机制线程同步比较典型的应用场合就是 生产者与消费者 二、生产者与消费者模型原理 在这个模型中&…

中文文本分词-技术实现

当做语音&文本相关的技术时&#xff0c;经常会涉及到文本的分词实现。以下是对中文的文本简单实现。 一、单个中文句子的分词 import jiebatext_ "我爱我的祖国&#xff01;" # 精确模式 seg_list jieba.cut(text_, cut_allFalse) print("精确模式: &qu…

【51实物与仿真】基于51单片机设计的波形/函数发生器(正弦波、锯齿波、三角波、矩形波,设定频率步进值,改变振幅,LCD显示)——文末完整资料链接

基于51单片机设计的波形函数发生器 演示视频: 功能简介: 1.本设计基于STC89C51/52(与AT89S51/52、AT89C51/52通用,可任选)单片机。 2.LCD1602液晶显示波形种类和频率值(10-100HZ)。 3.按键设置波形种类和设定频率步进值。 4.电位器器改变振幅(0V-3.5V稳定)。 5…

医院预约|基于springBoot的医院预约挂号系统设计与实现(附项目源码+论文+数据库)

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日…

集合根据上下级关系转树结构

1、创建实体对象 public class TreeNode {private String id;private String pid;private String name;private List<TreeNode> children;public TreeNode(String id,String pid,String name){this.id id;this.pid pid;this.name name;}public String getId() {retur…

独立游戏《Project:Survival》UE5C++开发日志0——游戏介绍

该游戏是《星尘异变》团队的下一款作品&#xff0c;太空科幻题材的生存游戏&#xff0c;我将负责使用C、蓝图实现游戏的基础框架和核心功能&#xff0c;其中还包含使用人工智能算法助力游戏开发或帮助玩家运营 目前已有功能&#xff1a; 1.3D库存系统&#xff1a;所有库存中的物…