vue3 + ts 二次封装 el-menu

实现效果:

1. types / menu.ts

export interface MenuItem {index: string,label: string,icon?: string,disabled?: boolean,children?: MenuItem[],
}

2. components / CustomMenu / index.vue

<template><el-menu :default-active="defaultActive"><custom-menu-item :menu-list="props.menuList"/></el-menu></template><script setup lang="ts">import CustomMenuItem from "@/components/CustomMenu/components/CustomMenuItem.vue";
import type {MenuItem} from "@/types/menu";const props = defineProps<{menuList: MenuItem[],defaultActive?: string
}>()</script><style scoped lang="scss"></style>

3. components / CustomMenu / components / CustomMenuItem.vue

<template><template v-for="menu in props.menuList" :key="menu.index"><el-sub-menu v-if="menu.children" :index="menu.index" :disabled="menu.disabled"><template #title><el-icon v-if="menu.icon"><component :is="menu.icon"/></el-icon><span>{{ menu.label }}</span></template><custom-menu-item :menu-list="menu.children"/></el-sub-menu><el-menu-item v-else :index="menu.index" :disabled="menu.disabled"><el-icon v-if="menu.icon"><component :is="menu.icon"/></el-icon><span>{{ menu.label }}</span></el-menu-item></template></template><script setup lang="ts">import type {MenuItem} from "@/types/menu";const props = defineProps<{menuList: MenuItem[]
}>()</script><style scoped lang="scss"></style>

4. 使用 test.vue

<template><div class="custom-menu-container"><custom-menu :menu-list="menuList" :default-active="defaultActive"/></div></template><script setup lang="ts">import CustomMenu from '@/components/CustomMenu/index.vue'const defaultActive = '1-1'import type {MenuItem} from "@/types/menu";const menuList: MenuItem[] = [{index: '1',label: '菜单1',icon: 'House',children: [{index: '1-1',label: '菜单1-1',// icon: 'Connection'},{index: '1-2',label: '菜单1-2',// icon: 'ChatDotRound'}]},{index: '2',label: '菜单2',icon: 'Notification',children: [{index: '2-1',label: '菜单2-1',// icon: 'Setting'}]},{index: '3',label: '菜单3',icon: 'Odometer'}
]</script><style scoped lang="scss">.custom-menu-container {position: absolute;top: 10px;left: 10px;width: 200px;height: fit-content;
}</style>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10.2 Linux_并发_进程相关函数

创建子进程 函数声明如下&#xff1a; pid_t fork(void); 返回值&#xff1a;失败返回-1&#xff0c;成功返回两次&#xff0c;子进程获得0(系统分配)&#xff0c;父进程获得子进程的pid 注意&#xff1a;fork创建子进程&#xff0c;实际上就是将父进程复制一遍作为子进程&…

傅里叶级数在机器人中的应用(动力学参数辨识)

B站首发&#xff01;草履虫都能看懂的【傅里叶变换】讲解&#xff0c;清华大学李永乐老师教你如何理解傅里叶变换&#xff0c;辨清美颜和变声原理&#xff0c;&#xff01;&#xff01;_哔哩哔哩_bilibiliB站首发&#xff01;草履虫都能看懂的【傅里叶变换】讲解&#xff0c;清…

Mac屏蔽系统更新,取出红点标记如果解锁hosts文件

引言&#xff1a;关闭系统更新&#xff0c;首先应该在系统偏好设置---软件更新---去掉自动更新的选项。即使如此&#xff0c;系统仍然进行macOS系统和自带safari等软件的检测更新&#xff0c;并图标右上角红点点标记提醒我们更新&#xff0c;那我们如果彻底屏蔽更新呢&#xff…

监控告警功能详细介绍及操作演示:运维团队的智能保障

在当今这个信息化高速发展的时代&#xff0c;运维团队面临着前所未有的挑战。为了确保系统的稳定性和高效运维&#xff0c;监控告警功能成为了运维团队不可或缺的得力助手。本文将详细介绍我们的监控告警功能&#xff0c;并结合实际操作页面进行演示&#xff0c;帮助运维团队更…

828华为云征文|部署在线文档应用程序 CodeX Docs

828华为云征文&#xff5c;部署在线文档应用程序 CodeX Docs 一、Flexus云服务器X实例介绍二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置2.4 Docker 环境搭建 三、Flexus云服务器X实例部署 CodeX Docs3.1 CodeX Docs 介绍3.2 CodeX Docs 部署3.3 CodeX…

AI产品经理PRD文档与传统产品经理PRD有什么不同呢?

目录 模型输出&#xff1a;说白了&#xff0c;就是你的AI要干啥数据接入&#xff1a;你的AI要吃啥“粮食”验收标准&#xff1a;怎么判断你的AI干得好不好经验总结 你好&#xff0c;我是三桥君 在工作中&#xff0c;当我作为传统产品经理时&#xff0c;通常只需提供产品需求文…

解决 Adobe 盗版弹窗

在这个文件夹下删除 Adobe CCXProcess 然后重装。 Adobe Premiere Pro 2024 (v24.6.1) Multilingual :: Варез от m0nkrusa [Warez by m0nkrus] (monkrus.ws) Adobe Photoshop 2024 (v25.12) Multilingual :: Варез от m0nkrusa [Warez by m0nkrus] (monkrus.…

Camera Raw:打开图像

在图像工作流程中&#xff0c;无论是 Raw 格式图像文件还是 JPEG、TIFF 文件&#xff0c;都可以先使用 Camera Raw 打开并调整后&#xff0c;再进入其它 Adobe 软件如 Photoshop 中进行进一步的编辑和处理。 一、打开 Raw 格式图像 1、通过 Adobe Bridge 打开 在 Adobe Bridge …

8.数据结构与算法-双向链表

双向链表的结构定义 从第二个指针找到下一个元素 从第一个指针找到上一个元素 双向循环列表 从第二个指针找到下一个元素&#xff0c;第二个指针可以往前循环找到链表开头 从第一个指针找到上一个元素&#xff0c;第一个指针可以往前循环昭侯链表结尾 双向链表的插入 双向链…

Australis 相機率定軟體說明

概要 課堂中使用Australis這套軟體&#xff0c;順帶記錄操作過程 內容以老師口述及我測試的經過 照片為老師課堂提供之 說明 執行 Step1. 匯入照片 注意&#xff01;&#xff01;如果是Mac的作業系統&#xff0c;將資料夾移到Windows上的時候&#xff0c;建議創一個新的資料…

Total_Expectation_Conditional_Bias_Variance_Tradeoff

Statistics with Prof. Liang Liu Topics: Total expectation, consitional expectation, conditional probability, marginal probability, 模型的 Bias, Variance 我们碰到的绝大多数都是 conditional 的probability 。比如&#xff0c;given miu, sigma square, 才能讨论…

详解代理模式-【静态代理与JDK动态代理】(非常的斯国一)

目录 静态代理 什么是静态代理: ​ 特点: 例子&#xff1a; JDK动态代理&#xff08;主要讲点&#xff09; 大纲&#xff1a; 1、与静态代码的联系 2、JDK动态代理的主流程 3、Proxy的源码 整体概述&#xff1a; 重要点的翻译 &#xff1a; newProxyInstance源码&am…

图神经网络:处理复杂关系结构与图分类任务的强大工具

创作不易&#xff0c;您的打赏、关注、点赞、收藏和转发是我坚持下去的动力&#xff01; 图神经网络&#xff08;Graph Neural Network, GNN&#xff09;是针对图数据的一类神经网络模型。图数据具有节点&#xff08;节点代表实体&#xff09;和边&#xff08;边代表节点之间的…

Webstorm 中对 Node.js 后端项目进行断点调试

首先&#xff0c;肯定需要有一个启动服务器的命令脚本。 然后&#xff0c;写一个 debug 的配置&#xff1a; 然后&#xff0c;debug 模式 启动项目和 启动调试服务&#xff1a; 最后&#xff0c;发送请求&#xff0c;即可调试&#xff1a; 这几个关键按钮含义&#xff1a; 重启…

【STM32-HAL库】自发电型风速传感器(使用STM32F407ZGT6)(附带工程下载链接)

一、自发电型风速传感器介绍 自发电型风速传感器&#xff0c;也称为风力发电型风速传感器或无源风速传感器&#xff0c;是一种不需要外部电源即可工作的风速测量设备。这种传感器通常利用风力来驱动内部的发电机构&#xff0c;从而产生电能来供电测量风速的传感器部分。以下是自…

Footprint Growthly Quest 工具:赋能 Telegram 社区实现 Web3 飞速增长

作者&#xff1a;Stella L (stellafootprint.network) 在 Web3 的快节奏世界里&#xff0c;社区互动是关键。而众多 Web3 社区之所以能够蓬勃发展&#xff0c;很大程度上得益于 Telegram 平台。正因如此&#xff0c;Footprint Analytics 精心打造了 Growthly —— 一款专为 Tel…

Miniforge详细安装教程(macOs和Windows)

(注&#xff1a;主要是解决商业应用anaconda收费问题&#xff0c;这是轻量级的代替&#xff0c;个人完全可以使用anaconda和miniconda) Miniforge 是一个轻量级的包管理器&#xff0c;类似于 Anaconda 和 Miniconda。它主要用于安装基于 conda 的 Python 环境&#xff0c;专注于…

opencv - Fourier Transform 傅里叶变换

目标 在本节中&#xff0c;我们将学习 使用 OpenCV 查找图像的傅里叶变换利用 Numpy 中可用的 FFT 函数傅里叶变换的一些应用我们将看到以下函数&#xff1a;cv.dft()、cv.idft() 等 理论 傅里叶变换用于分析各种滤波器的频率特性。对于图像&#xff0c;2D 离散傅里叶变换 …

Android Studio 新版本 Logcat 的使用详解

点击进入官方Logcat介绍 一个好的Android程序员要会使用AndroidStudio自带的Logcat查看日志&#xff0c;会Log定位也是查找程序bug的第一关键。同时Logcat是一个查看和处理日志消息的工具&#xff0c;它可以更快的帮助开发者调试应用程序。 步入正题&#xff0c;看图说话。 点…