详细分析el-breadcrumb 面包屑的基本知识(附Demo)

前言

基本的知识推荐阅读:面包屑导航(Breadcrumb)

1. 基本知识

el-breadcrumb 是 Element Plus 中的面包屑导航组件,主要用于展示当前页面在整个应用程序中的位置,并提供导航功能

面包屑通常用于提高用户体验,尤其是在多层级的页面结构中,让用户更容易理解其当前所在的位置并能够快速返回上级页面

  • el-breadcrumb:面包屑的容器组件
  • el-breadcrumb-item:面包屑中的每一项,通常用于指向特定页面

其中属性有如下:separator:自定义分隔符,默认为 /,可以设置为其他符号,如 > 或 |

常用场景可以用于:

  1. 多层级页面导航:在复杂应用中,比如管理系统,可以使用面包屑展示层级结构
  2. 用户定位:帮助用户识别当前所处的位置,尤其是在较深的页面结构中
  3. 快速导航:用户可以通过点击面包屑的项快速返回上级页面

2. Demo

基本的用法如下:

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
  <el-breadcrumb-item to="/module3">模块3</el-breadcrumb-item>
</el-breadcrumb>

或者使用动态的方式:

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">{
   
   { item.name }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      breadcrumbItems: [
        {
      
       name: '首页', path: '/' },
        {
      
       name: '模块1', path: '/module1' },
        {
      
       name: '模块2', path: '/module2' },
        {
      
       name: '模块3', path: '/module3' }
      ]
    };
  }
};
</script>

总体截图如下:

在这里插入图片描述

扫描二维码关注公众号,回复: 17492741 查看本文章

如果需要自定义的分隔符,可以使用如下代码模块:

<el-breadcrumb :separator="arrow">
  <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
</el-breadcrumb>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      arrow: '>'
    };
  }
};
</script>

截图如下:

在这里插入图片描述

如果使用slot 自定义内容

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="/">
    <span style="color: red;">首页</span>
  </el-breadcrumb-item>
  <el-breadcrumb-item to="/module1">模块1</el-breadcrumb-item>
  <el-breadcrumb-item to="/module2">模块2</el-breadcrumb-item>
</el-breadcrumb>

截图如下:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47872288/article/details/143330281