ElementPlus 导航组件

ElementPlus 导航组件

简介

页面导航是前端开发中重要的组成部分，它直接影响到用户体验和网站的整体效果。一个良好设计的页面导航能够为用户提供便利的导航路径，从而让用户更愿意使用并满意于网站或应用程序。

Element Plus 提供了丰富的页面导航组件，可以帮助开发者实现页面间的导航的路由控制。

Breadcrumb 面包屑

面包屑（Breadcrumb）是一种用于显示当前页面的路径，并提供快速返回到之前任意页面的导航元素。

基本使用

在 Element Plus 中，面包屑通过 el-breadcrumb 组件实现。

要创建面包屑，需要使用 el-breadcrumb-item 组件来标识从页面开始的每一级，这样可以构建出多级的导航路径。

同时，可以通过 separator 属性来设置层级之间的分隔符，或者使用 iconfont 设置图标作为分隔符。

<template>
    <!-- 基础用法，在 el-breadcumb 中使用 el-breadcrumb-item 标签表示从首页开始的每一级 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/vue' }">Vue</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/vue/elementplus' }">ElementPlus</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/vue/elementplus/breadcrumb' }">Breadcrumb</el-breadcrumb-item>
    </el-breadcrumb>
    <br><br>

    <!-- 图标分隔符 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item ><a href="/home">Home</a></el-breadcrumb-item>
        <el-breadcrumb-item ><a href="/home/vue">Vue</a></el-breadcrumb-item>
        <el-breadcrumb-item ><a href="/home/vue/elementplus">ElementPlus</a></el-breadcrumb-item>
        <el-breadcrumb-item ><a href="/home/vue/elementplus/breadcrumb">Breadcrumb</a></el-breadcrumb-item>

    </el-breadcrumb>
</template>
<script setup>
// 导入图标
import { ArrowRight } from '@element-plus/icons-vue'
</script>

API

组件属性及事件可查看官方文档。

Menu 菜单

菜单组件可以为网站提供导航功能的菜单。

不同类型的菜单样式可以根据具体的设计需求和用户体验考虑来选择合适的布局，从而为用户提供更方便、直观的导航方式，提升用户的交互体验。

Element Plus 提供了丰富的菜单组件和样式选项，使得开发者可以灵活地设计和实现各种类型的菜单布局。

顶栏菜单

顶部栏菜单通常位于页面的最顶部，它们适用于各种场景，提供了一种直观的导航方式。

导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。

另外，在菜单中通过 el-sub-menu 组件可以生成二级菜单。

菜单组件还提供了background-color、text-color 和 active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

<template>
    <el-menu :default-active="activeIndex2"  mode="horizontal" background-color="#545c64"
        text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
        <el-menu-item index="1">Processing Center</el-menu-item>
        <el-sub-menu index="2">
            <template #title>Workspace</template>
            <el-menu-item index="2-1">Item One</el-menu-item>
            <el-menu-item index="2-2">Item Two</el-menu-item>
            <el-menu-item index="2-3">Item Three</el-menu-item>
            <el-sub-menu index="2-4">
                <template #title>Item Four</template>
                <el-menu-item index="2-4-1">Sub Item One</el-menu-item>
                <el-menu-item index="2-4-2">Sub Item Two</el-menu-item>
                <el-menu-item index="2-4-3">Sub Item Three</el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="3" disabled>Info</el-menu-item>
        <el-menu-item index="4">Orders</el-menu-item>
    </el-menu>
</template>

<script  setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

左右菜单

这种布局将菜单项放置在页面的左侧或右侧，可以根据设计需求选择合适的侧边，适合于需要更宽的内容展示区域的场景。

默认情况下，水平菜单项是左侧布局，右侧布局的方式本质上添加一个占位元素，将后面的菜单项挤到右侧。

<template>
    <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect">
        <el-menu-item index="0">
            <img style="width: 100px" src="https://element-plus.org/images/element-plus-logo.svg" alt="Element logo" />
        </el-menu-item>
        <!-- 添加占位区域，将菜单挤到右边 -->
        <div class="placeholder_area" />
        <!-- 右侧的菜单  -->
        <el-menu-item index="1">Processing Center</el-menu-item>
        <el-sub-menu index="2">
            <template #title>Workspace</template>
            <el-menu-item index="2-1">item one</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
            <el-sub-menu index="2-4">
                <template #title>item four</template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
                <el-menu-item index="2-4-2">item two</el-menu-item>
                <el-menu-item index="2-4-3">item three</el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
    </el-menu>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'

    const activeIndex = ref('1')
    const handleSelect = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
    </script>

    <style>
    .placeholder_area {
        /* 让占位区域占据所有剩余空间 */
        flex: 1;
        background-color: red;
    }
</style>

侧栏菜单

垂直菜单通常位于页面的侧边，可以包含多级的子菜单，提供了清晰的导航结构，适合于大型应用或者有复杂功能结构的场景。

通过 el-menu-item-group 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定。

<template>
    <el-col :span="4">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" default-active="2" text-color="#fff"
            @open="handleOpen" @close="handleClose">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>Menu One</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="1-1">sub item one</el-menu-item>
                    <el-menu-item index="1-2">sub item two</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group Two">
                    <el-menu-item index="1-3">sub item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                    <template #title>item four</template>
                    <el-menu-item index="1-4-1">sub item one</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon>
                    <Menu />
                </el-icon>
                <span>Menu Two</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <el-icon>
                    <document />
                </el-icon>
                <span>Menu Three</span>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon>
                    <setting />
                </el-icon>
                <span>Menu Four</span>
            </el-menu-item>
        </el-menu>
    </el-col>
</template>

<script lang="ts" setup>
import {
    Document,
    Menu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

折叠面板菜单

折叠菜单在垂直导航菜单的基础上，通过 collapse 设置属性可以将菜单折叠起来，以节省页面空间，同时保持了导航功能。

<template>
    <el-col :span="3">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">折叠</el-radio-button>
        </el-radio-group>
        <el-menu text-color="#fff" active-text-color="#ffd04b" background-color="#545c64" default-active="2" :collapse="isCollapse"
            @open="handleOpen" @close="handleClose">
            <el-menu-item index="1">
                <el-icon> <location /> </el-icon>
                <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="2">
                <el-icon> <Menu /> </el-icon>
                <template #title>Navigator Two</template>
            </el-menu-item>
            <el-menu-item index="3" >
                <el-icon> <document /> </el-icon>
                <template #title>Navigator Three</template>
            </el-menu-item>
            <el-menu-item index="4">
                <el-icon> <setting /> </el-icon>
                <template #title>Navigator Four</template>
            </el-menu-item>
        </el-menu>
    </el-col>
</template>

<script  setup>
import { ref } from 'vue'
import {
    Document,
    Menu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

API

组件属性及事件可查看官方文档。

Dropdown 下拉菜单

下拉菜单是一个非常灵活和实用的交互组件，它为开发者提供了丰富的功能和配置选项，使得下拉菜单的设计和使用变得更加方便和高效。

通过 el-dropdown 组件可以有效地优化界面布局，提升用户的交互体验。

<template>
    <el-row>
        <el-col :span="8">
            <el-dropdown>
                <span>
                    悬停触发下拉菜单 <el-icon> <arrow-down /> </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlusFilled">Action 2</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-col>
        <el-col :span="8">
            <el-dropdown trigger="click">
                <span>
                    单击触发下拉菜单 <el-icon> <arrow-down /> </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlusFilled">Action 2</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-col>
        <el-col :span="8">
            <el-dropdown trigger="contextmenu">
                <span>
                   右击触发下拉菜单 <el-icon> <arrow-down /> </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlusFilled">Action 2</el-dropdown-item>
                        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-col>
    </el-row>
</template>

<script setup>
import {
    ArrowDown,
    Check,
    CircleCheck,
    CirclePlus,
    CirclePlusFilled,
    Plus,
} from '@element-plus/icons-vue'
</script>

API

组件属性及事件可查看官方文档。

小结

• el-breadcrumb 组件可实现面包屑导航
• el-menu 组件可实现不同样式菜单导航
• el-dropdown 组件可实现下拉菜单导航