【Element入门】5、Element UI 导航组件详解

【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 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

标签： ui vue.js elementui

本文转载自: https://blog.csdn.net/weixin_52938153/article/details/139124521
版权归原作者 一只小爪磕 所有，如有侵权，请联系我们删除。

【Element入门】5、Element UI 导航组件详解

【Element入门】Element UI 导航组件详解

Element入门系列导航

使用Menu组件创建导航栏

基本概念

基本使用

垂直导航栏

多级菜单

响应式导航栏

使用Tabs组件创建选项卡

基本概念

基本使用

动态选项卡

自定义选项卡样式

带图标的选项卡

结语

发表评论

“【Element入门】5、Element UI 导航组件详解”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航