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

【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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这个示例中，我们使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这个示例中，我们创建了一个垂直导航栏，并为导航菜单添加了图标和自定义样式。

多级菜单

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这个示例中，我们通过嵌套多个 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这个示例中，我们结合了 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个示例中，我们使用 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

在这个示例中：

• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个示例中，我们将 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个示例中，我们在每个 el-tab-pane 中添加了图标，使选项卡更加美观。

结语

通过本章的学习，我们详细了解了 Element UI 提供的两种主要导航组件：Menu 组件和 Tabs 组件。Menu 组件适用于创建水平和垂直导航菜单，支持多级菜单和图标；Tabs 组件适用于创建选项卡式导航，支持动态添加和删除选项卡，并可以自定义样式和添加图标。Element UI 提供的这些导航组件可以帮助我们快速构建高效、灵活和美观的导航系统。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他组件和高级功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！