vue3.0后台管理项目（day18）

懒羊羊学技术
68 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

Snipaste_2022-09-28_08-38-26.png

上一篇文章中我们完成了点击提交来判断用户输入的是否符合校验规则以及删除按钮的提示操作，接下来我们将完成每个页面上都会显示的面包屑

  1. 首先面包屑的完成需要用到element-plus中的 Breadcrumb 面包屑组件，具体的链接如： element-plus.gitee.io/zh-CN/compo… ，因为这个组件在许多页面上都会使用到，所以我们需要将这个组件封装为一个公用组件，在companies文件夹里面创建一个Breadcrumb.vue的文件，里面来写我们的面包屑组件
  2. 我们将这个组件的代码复制粘贴到Breadcrumb组件中

image.png

  1. 这里面的v-for动态渲染的是我们router.index里面配置的路由名称，我们需要使用$route.matched来获取到，以及里面的to跳转路径也需要使用v-bind也就是：来动态绑定，具体的实现代码如下所示：
 <div class="box0">
         <!-- 面包屑 -->
        <div class="box1">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item class="item" :to="{ path: '/' }"
              >切换用户</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in $route.matched"
              :key="index"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
  1. 这里的面包屑我们使用el-card来包裹会显得好看一些，然后这个切换用户后面的内容就会随着我们点击哪个页面而随之切换了
  2. 在面包屑的右侧还一个打卡功能，这里使用到了element-plus中的时间日期选择器，具体的链接如：element-plus.gitee.io/zh-CN/compo… ，我们将这个组件的源代码复制粘贴到上面配置好的面包屑的下面。
avatar
文章
阅读
粉丝