云南公司网站开发广告平台推广渠道
【Element入门】Element UI 导航组件详解
Element入门系列导航
【Element入门】1、Element UI 介绍与安装
【Element入门】2、Element UI 的基本使用
【Element入门】3、Element UI 表单组件详解
【Element入门】4、Element UI 布局组件详解
【Element入门】5、Element UI 导航组件详解（本文）
【Element入门】6、Element UI 数据展示组件详解
【Element入门】7、Element UI 反馈组件详解
【Element入门】8、Element UI 自定义主题
导航是 Web 应用中不可或缺的一部分，它为用户提供了页面的结构和导航路径。Element UI 提供了强大的导航组件，包括 Menu 组件和 Tabs 组件，帮助开发者快速构建各种类型的导航栏和选项卡。本篇文章将详细介绍这两类导航组件的使用方法。
使用Menu组件创建导航栏
基本概念
Menu 组件用于创建导航菜单。它提供了水平和垂直两种布局方式，并支持多级菜单、图标、分割线等功能，非常适合用于创建站点的主导航栏和侧边栏。
基本使用
以下是一个简单的水平导航栏示例：
<template><div id="app"><el-menu mode="horizontal" default-active="1"><el-menu-item index="1">Home</el-menu-item><el-menu-item index="2">About</el-menu-item><el-menu-item index="3">Contact</el-menu-item><el-submenu index="4"><template slot="title">More</template><el-menu-item index="4-1">Option 1</el-menu-item><el-menu-item index="4-2">Option 2</el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {padding: 20px;
}
</style>
在这个示例中，我们使用 el-menu 组件创建了一个水平导航栏，并使用 el-menu-item 和 el-submenu 组件添加了导航项和子菜单。
垂直导航栏
以下是一个简单的垂直导航栏示例：
<template><div id="app"><el-menu default-active="1" class="el-menu-vertical-demo" mode="vertical"><el-menu-item index="1"><i class="el-icon-menu"></i> Home</el-menu-item><el-menu-item index="2"><i class="el-icon-document"></i> About</el-menu-item><el-menu-item index="3"><i class="el-icon-phone"></i> Contact</el-menu-item><el-submenu index="4"><template slot="title"><i class="el-icon-more"></i> More</template><el-menu-item index="4-1">Option 1</el-menu-item><el-menu-item index="4-2">Option 2</el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {width: 200px;
}
.el-menu-vertical-demo {background-color: #333;color: #fff;
}
.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-submenu__title {color: #fff;
}
.el-menu-vertical-demo .el-menu-item.is-active {background-color: #409EFF;
}
</style>
在这个示例中，我们创建了一个垂直导航栏，并为导航菜单添加了图标和自定义样式。
多级菜单
Menu 组件支持多级菜单，通过嵌套 el-submenu 组件可以实现多级导航：
<template><div id="app"><el-menu default-active="1" class="el-menu-vertical-demo" mode="vertical"><el-menu-item index="1"><i class="el-icon-menu"></i> Home</el-menu-item><el-submenu index="2"><template slot="title"><i class="el-icon-document"></i> About</template><el-menu-item index="2-1">Team</el-menu-item><el-menu-item index="2-2">Company</el-menu-item><el-submenu index="2-3"><template slot="title">More</template><el-menu-item index="2-3-1">History</el-menu-item><el-menu-item index="2-3-2">Vision</el-menu-item></el-submenu></el-submenu><el-menu-item index="3"><i class="el-icon-phone"></i> Contact</el-menu-item></el-menu></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {width: 200px;
}
.el-menu-vertical-demo {background-color: #333;color: #fff;
}
.el-menu-vertical-demo .el-menu-item,
.el-menu-vertical-demo .el-submenu__title {color: #fff;
}
.el-menu-vertical-demo .el-menu-item.is-active {background-color: #409EFF;
}
</style>
在这个示例中，我们通过嵌套多个 el-submenu 组件实现了多级导航菜单。
响应式导航栏
通过结合 Element UI 的栅格系统和菜单组件，可以方便地创建响应式导航栏。以下是一个简单的响应式导航栏示例：
<template><div id="app"><el-row><el-col :span="24"><el-menu mode="horizontal" default-active="1"><el-menu-item index="1">Home</el-menu-item><el-menu-item index="2">About</el-menu-item><el-menu-item index="3">Contact</el-menu-item><el-submenu index="4"><template slot="title">More</template><el-menu-item index="4-1">Option 1</el-menu-item><el-menu-item index="4-2">Option 2</el-menu-item></el-submenu></el-menu></el-col></el-row></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {padding: 20px;
}
</style>
在这个示例中，我们结合了 el-row 和 el-col 组件，实现了一个响应式的水平导航栏。
使用Tabs组件创建选项卡
基本概念
Tabs 组件用于创建选项卡式的导航，适合用于在同一页面内切换不同的内容。Tabs 组件包含 el-tabs 和 el-tab-pane 组件，其中 el-tabs 负责整体的选项卡容器，el-tab-pane 负责每个选项卡的内容。
基本使用
以下是一个简单的选项卡示例：
<template><div id="app"><el-tabs v-model="activeTab"><el-tab-pane label="Tab 1" name="1">Content of Tab 1</el-tab-pane><el-tab-pane label="Tab 2" name="2">Content of Tab 2</el-tab-pane><el-tab-pane label="Tab 3" name="3">Content of Tab 3</el-tab-pane></el-tabs></div>
</template><script>
export default {name: 'App',data() {return {activeTab: '1'};}
};
</script>
在这个示例中，我们使用 el-tabs 和 el-tab-pane 组件创建了一个简单的选项卡式导航。通过 v-model 实现了选项卡之间的切换。
动态选项卡
我们可以动态添加和删除选项卡。以下是一个动态选项卡的示例：
<template><div id="app"><el-tabs v-model="activeTab" @tab-remove="removeTab" @tab-add="addTab" type="card" closable><el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.title" :name="item.name">{{ item.content }}</el-tab-pane><el-button size="mini" @click="addTab">Add Tab</el-button></el-tabs></div>
</template><script>
export default {name: 'App',data() {return {activeTab: '1',tabs: [{ title: 'Tab 1', name: '1', content: 'Content of Tab 1' },{ title: 'Tab 2', name: '2', content: 'Content of Tab 2' },{ title: 'Tab 3', name: '3', content: 'Content of Tab 3' },],tabIndex: 3,};},methods: {addTab() {this.tabIndex++;const newTabName = `${this.tabIndex}`;this.tabs.push({title: `Tab ${newTabName}`,name: newTabName,content: `Content of Tab ${newTabName}`});this.activeTab = newTabName;},removeTab(targetName) {const tabs = this.tabs;const activeTab = this.activeTab;if (activeTab === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {const nextTab = tabs[index + 1] || tabs[index - 1];if (nextTab) {this.activeTab = nextTab.name;}}});}this.tabs = tabs.filter(tab => tab.name !== targetName);}}
};
</script>
在这个示例中：
activeTab用于绑定当前激活的选项卡。tabs数组存储所有的选项卡信息。tabIndex用于生成新的选项卡名称。addTab方法用于动态添加新的选项卡。removeTab方法用于动态删除指定的选项卡，并在删除当前激活的选项卡时自动切换到另一个选项卡。
自定义选项卡样式
可以通过 type 属性设置选项卡的样式，例如 card 样式：
<template><div id="app"><el-tabs v-model="activeTab" type="card"><el-tab-pane label="Tab 1" name="1">Content of Tab 1</el-tab-pane><el-tab-pane label="Tab 2" name="2">Content of Tab 2</el-tab-pane><el-tab-pane label="Tab 3" name="3">Content of Tab 3</el-tab-pane></el-tabs></div>
</template><script>
export default {name: 'App',data() {return {activeTab: '1'};}
};
</script>
在这个示例中，我们将 type 属性设置为 card，使选项卡显示为卡片样式。
带图标的选项卡
可以为选项卡添加图标，使其更加直观：
<template><div id="app"><el-tabs v-model="activeTab"><el-tab-pane label="Tab 1" name="1"><i class="el-icon-menu"></i> Content of Tab 1</el-tab-pane><el-tab-pane label="Tab 2" name="2"><i class="el-icon-document"></i> Content of Tab 2</el-tab-pane><el-tab-pane label="Tab 3" name="3"><i class="el-icon-setting"></i> Content of Tab 3</el-tab-pane></el-tabs></div>
</template><script>
export default {name: 'App',data() {return {activeTab: '1'};}
};
</script>
在这个示例中，我们在每个 el-tab-pane 中添加了图标，使选项卡更加美观。
结语
通过本章的学习，我们详细了解了 Element UI 提供的两种主要导航组件：Menu 组件和 Tabs 组件。Menu 组件适用于创建水平和垂直导航菜单，支持多级菜单和图标；Tabs 组件适用于创建选项卡式导航，支持动态添加和删除选项卡，并可以自定义样式和添加图标。Element UI 提供的这些导航组件可以帮助我们快速构建高效、灵活和美观的导航系统。
在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！