vue组件封装---面包屑

Ticnix
60 阅读4分钟

前言

关于很多的某某管理系统都很喜欢有折叠面板的设计，因为这样很方便归类而且用户的体验感也很好，但是如果当面板折叠以后，如果用户浏览时间过长忘记了自己浏览的板块是哪一个，然后下次又回到这一页，或者是不知道知道自己访问的板块属于哪一类，这时就需要面包屑作为一个导航来引导用户，类似于一个头部导航，并且具有可以返回上一级的功能

有无面包屑对比

我们还是看上两篇文章的页面

有面包屑

image.png 无面包屑 image.png

可以看到有面包屑的那一版更加直观、指引性更强，而且设置超链接可以直接返回上一级，交互性更强那如果导航栏中有这么多的页面，难道每一个都要在对应的页面文件中写一遍面包屑吗，显然我是一个懒人，我更喜欢拎包就用，所有这就涉及一个很基础的vue的封装思想。

实现思路

  1. 在任意写好喜欢的面包屑样式，我是用了Element Plus中的面包屑组件再自己微调了一下（一定要在对应的页面中调试好，包括内外边距这些，不然有的会影响整体页面的观感）

element-plus.org/zh-CN/compo… 面包屑组件链接

  1. 在公共组件components中新建vue文件
  2. 把面包屑的相关代码写到这个文件中，确定好固定的部分和可变的标题部分的内容
  3. 最后在自己的页面中导入包和引用

面包屑组件的创建

1、新建BreadCrumb.vue文件

找到vue中的公共components文件夹中新建BreadCrumb.vue文件，要注意因为这是在所有页面中都要显示的组件，这样他是属于一个公共组件，不要放在私有组件的文件夹中，容易混淆

1a58bb95a2876fb1ba8585534cca282a.jpg

2、在文件中写好提前设计的面包屑组件代码

  • 这里用的是 Vue 3 中用于定义组件 props（组件接收的外部参数）的语法，使用了 <script setup 语法糖中的 defineProps 函数。
  • 将确定好的需要动态输入的参数放在defineProps中，这是在声明当前组件需要接收两个必传的字符串类型参数,并且在template中用{{title}}传值,这样可以实现在不同的页面中显示不同的标题。
  • 例如我要改的是二级标题和三级标题，传的就是 title2和title3，定义为必填参数（required: true），类型为字符串（String），通过这样的定义，父组件在使用该组件时，必须传入 title2 和 title3 这两个字符串参数，否则 Vue 会在开发环境下给出警告，起到类型校验和参数约束的作用。
<script setup>
defineProps({
  //二级标题
  title2: {
    required: true,//参数是否bitia
    type: String//类型
  },
  //三级标题
  title3: {
    required: true,
    type: String
  }
})
</script>

<template>
    <div class="custom-breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ title2 }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ title3 }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
   <div class="main-container">
    <slot></slot>
   </div>
</template>

<style lang="scss" scoped>
.main-container {
  background-color: #eef1f6;
  padding: 5px;
  border-radius: 4px;
  margin-top: 20px;
}

  .custom-breadcrumb {
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-bottom: 1px solid #eaecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.el-breadcrumb__separator {
  color: #909399;
  margin: 0 8px;
}

:deep(.el-breadcrumb__inner){
  color: #606266 !important;
  cursor: pointer;
  &:hover {
    color: #409eff !important;
  }
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #303133 !important;
  &:hover {
    color: #303133 !important;
  }
}
</style>

3、在子文件中调用公共组件

首先在目标文件中导入包

import BreadCrumbs from '@/components/BreadCrumbs.vue'

自定义组件面包屑的用法

  • <BreadCrumbs>：这是一个自定义的面包屑导航组件（通常用于展示页面的层级路径，方便用户了解当前所在位置并进行导航）。
  • title2="工作中心" 和 title3="数据看板"：这是向 <BreadCrumbs> 组件传递的属性（props）。组件内部可以通过接收这些属性，来渲染对应的面包屑导航内容，比如这里可能会在面包屑中显示 “工作中心” 和 “数据看板” 这两个层级信息，帮助用户明确当前处于 “工作中心” 下的 “数据看板” 页面。

最后中间的内容往面包屑中间写即可

e0048dd7e7d1ff58e329046c7f0a69a4.png

avatar
文章
阅读
粉丝