张掖市网站建设,wordpress做商城网站,购物商城有哪些,手机网站设计与实现是什么在 Element UI#xff08;针对 Vue 2#xff09;和 Element Plus#xff08;针对 Vue 3#xff09;中#xff0c;NavMenu 导航菜单组件通常被称为 el-menu。虽然两个版本在 API 和实现上可能有一些细微的差别#xff0c;但基本概念和用法是相似的。下面我将分别介绍在 Vu…在 Element UI针对 Vue 2和 Element Plus针对 Vue 3中NavMenu 导航菜单组件通常被称为 el-menu。虽然两个版本在 API 和实现上可能有一些细微的差别但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用 el-menu 组件。
Vue 2 Element UI
在 Vue 2 的 Element UI 中el-menu 组件用于创建导航菜单。
属性Props
mode菜单模式如 horizontal水平或 vertical垂直。default-active默认激活的菜单项的索引。default-openeds默认展开的菜单项的索引数组仅当 mode 为 vertical 时有效。unique-opened是否只保持一个子菜单的展开仅当 mode 为 vertical 时有效。router是否启用路由模式。background-color菜单的背景色。text-color菜单的文字颜色。active-text-color当前激活菜单的文字颜色。…还有其他属性具体请参考 Element UI 官方文档
事件Events
select当菜单项被点击时触发。open当子菜单展开时触发。close当子菜单关闭时触发。…还有其他事件具体请参考 Element UI 官方文档
示例
templateel-menu:default-activeactiveIndexclassel-menu-vertical-demoselecthandleSelectmodeverticalbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template slottitle我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-submenu!-- 其他菜单项 --/el-menu
/templatescript
export default {data() {return {activeIndex: 1};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);this.activeIndex key;}}
};
/scriptVue 3 Element Plus
在 Vue 3 的 Element Plus 中el-menu 组件的用法与 Vue 2 的 Element UI 类似但可能会有一些 API 变动和新增功能。
属性Props和事件Events
Element Plus 的 el-menu 组件的大部分属性和事件与 Element UI 保持一致但可能会有一些细微的差别或新增的属性/事件。
示例假设与 Element UI 类似
templateel-menu:default-activeactiveIndexselecthandleSelectmodeverticalbackground-color#545c64text-color#fffactive-text-color#ffd04bel-menu-item index1处理中心/el-menu-itemel-submenu index2template #title我的工作台/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-submenu!-- 其他菜单项 --/el-menu
/templatescript setup
import { ref } from vue;const activeIndex ref(1);function handleSelect(key, keyPath) {console.log(key, keyPath);activeIndex.value key;
}
/script注意由于 Element Plus 还在不断发展中具体的 API 和使用方法可能会有所不同
