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

文章目录

• 面包屑
• tag

  面包屑

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

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

          首页        活动管理        活动列表        活动详情

  之前我们在 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 即可

  {{item.label}}

  样式需要进行修改

  修改哪个 class 可以查看元素

                    ......        ......  .......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;        }      }    }  }}

  tag

  Element ui Tag

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

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

              {{ item.label }}      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        })      }    }  }}.tabs{  padding: 20px;  .el-tag{    margin-right: 15px;    cursor: pointer;  }}

  我们直接复制 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、删除的是当前路由，当前路由在中间