【Vue2+Element ui通用后台】面包屑和tag功能

面包屑

Element ui 面包屑显示当前页面的路径快速返回之前的任意页面完成效果如下

我们之前把头部的代码封装到了 CommonHeader.vue 中面包屑部分直接写死了一个首页我们可以把官网的面包屑代码先直接复制过来

<el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

之前我们在 store/tab.js 中我们写了头部的是否开关这里我们增加面包屑的数据。我们点击左侧菜单面包屑会依次展示菜单内容所以数据结构和菜单差不多我们直接复制菜单的数据

export default {
    state:{
        isCollapse:false,//控制菜单展开/收起
        tabList:[
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/home'
            },
        ]//面包屑数据
    },
    mutations:{
        ......
    }
}

当点击左侧菜单时面包屑的内容相应修改所以我们修改 CommonAside.vue 之前已经有点击菜单的方法我们修改 menuClick使用 this.$store.commit 来调用 selectMenu 方法然后传入点击菜单的数据

menuClick(item) {
      ......
      this.$store.commit('selectMenu',item)
}

我们在 tab.js 中增加 selectMenu 方法

// 更新面包屑数据
        selectMenu(state,val){
            // 判断添加数据是否为首页
            if(val.name !== 'home'){
                // 判断如果不存在
                const index = state.tabList.findIndex(item => item.name === val.name )
                // 如果不存在
                if(index === -1){
                    state.tabList.push(val)
                }
            }
        }

由于面包屑默认数据就是首页所以 selectMenu 方法先判断是不是首页不是首页再执行下面的代码

然后判断 tabList 中是否存在所点击的菜单数据如果存在就没有必要重复添加。是否存在可以使用 findIndex传入一个函数如果存在则返回一个索引如果不存在返回 -1

接下来我们在 CommonHeader.vue 中使用面包屑数据当然我们可以使用this.$store.state.tab.tabList来获取我们学习一个更简单的方法使用 mapstate

在这里插入代码片

tags 是我们起的数据别名后边跟一个函数返回的就是我们需要的数据由于返回的是一个对象我们使用扩展运算符 ...将 mapState 进行结构

然后面包屑内容使用 v-for 循环 tags 即可

<el-breadcrumb separator="/">
	<el-breadcrumb-item v-for="item in tags" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
</el-breadcrumb>

样式需要进行修改

修改哪个 class 可以查看元素

<template>
  <div class="header-container">
    <div class="l-content">
      <el-button style="margin-right: 20px" icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
      ......
    </div>
    ......
  </div>
</template>

......

<style lang="less" scoped>
.header-container {
   ......
  .l-content{
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item{
      .el-breadcrumb__inner{
        font-weight: normal;
        &.is-link{
          color: #666666;
        }
      }
      &:last-child{
        .el-breadcrumb__inner{
          color: #ffffff;
        }
      }
    }
  }
}
</style>

tag

Element ui Tag

tag 功能展示如下点击左侧路由tag 增加点击相应 tag 跳转对应路由tag 可以删除

我们把这个功能封装成组件在 components 下新建 CommonTag.vue代码如下

<template>
  <div class="tabs">
    <el-tag
        v-for="(item,index) in tags"
        :key="item.path"
        :closable="item.name !== 'home'"
        :effect="$route.name === item.name?'dark':'plain'"
        size="small"
        @click="handleClick(item)"
        @close="handleClose(item,index)">
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name:'CommonTag',
  data(){
    return {}
  },
  computed:{
    ...mapState({
      tags: state => state.tab.tabList
    })
  },
  methods:{
    ...mapMutations(['closeTag']),
    handleClick(item){
      this.$router.push({name:item.name});
    },
    handleClose(item,index){
      // 调用store中的mutation删除点击的项
      this.closeTag(item)
      // 删除后的tags长度
      const length = this.tags.length;
      // 删除之后的跳转逻辑
      // 1、如果不是删除的当前路由。根据name判断是否相等。当前路由不一定是最后一个
      if(item.name !== this.$route.name){
        // 那么直接删除该项即可
        return
      }
      // 2、如果删除的当前路由,即选中的tag
      // 2.1 当前路由在最后也就是删除最后一项
      if(index === length){
        // 那么需要跳转到前一项
        this.$router.push({
          name: this.tags[index -1].name
        })
      }else{
        // 2.2 当前路由不在最后一项
        // 那么跳转到后一项
        this.$router.push({
          name: this.tags[index].name
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.tabs{
  padding: 20px;
  .el-tag{
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>

我们直接复制 Element UI 中的 tag 代码复制过来因为数据和面包屑的内容是一样的所以我们可以直接获取 vuex 中的面包屑数据进行 v-for 循环即可

用 closable 设置是否可关闭首页不可关闭其他都可以

用 effect 设置主题如果是当前路由则使用深色主题

因为使用了$route.name === item.name?'dark':'plain' 即路由name 是否和当前 tag name 相同所以 router / index.js 中需要给路由添加 name 属性

//2、将路由与组件进行映射
const routes = [
    {
        //主路由
        path: '/',
        component: Main,
        redirect: '/home',
        children: [
            {path: 'home', name: 'home', component: Home},// 主页
            {path: 'user', name: 'user', component: User},// 用户管理
            {path: 'mall', name: 'mall', component: Mall},// 商品管理
            {path: 'page1', name: 'page1', component: PageOne},// 页面1
            {path: 'page2', name: 'page2', component: PageTwo},// 页面2
        ]
    }
]

然后实现点击事件点击相应 tag 应该跳转到相应路由。在 tag 上增加 click 事件传入数据加入路由即可

点击删除按钮有一个相应的事件看官方文档最后在 tag 上增加 close 事件。功能相对复杂需要分为几种情况注释中都有

删除数据本质上是删除 tabs.js 中的 tabList 数据所以修改 tabs.js

import {findIndex} from "core-js/internals/array-iteration";

export default {
    state:{
        isCollapse:false,//控制菜单展开/收起
        tabList:[
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/home'
            },
        ]//面包屑数据
    },
    mutations:{
        ......
        // 删除指定的 tag 数据第一个参数是固定的
        closeTag(state,item){
            const index = state.tabList.findIndex(val=>val.name === item.name);
            state.tabList.splice(index,1);
        }
    }
}

1、删除的不是当前路由

2、删除的是当前路由当前路由在最后

3、删除的是当前路由当前路由在中间