面包屑

Element ui 面包屑：顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面，完成效果如下：

我們之前把頭部的代碼封裝到了 CommonHeader.vue 中，面包屑部分直接寫死了一個首頁，我們可以把官網(wǎng)的面包屑代碼先直接復(fù)制過來：

<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 中我們寫了頭部的是否開關(guān)，這里我們增加面包屑的數(shù)據(jù)。我們點擊左側(cè)菜單，面包屑會依次展示菜單內(nèi)容，所以數(shù)據(jù)結(jié)構(gòu)和菜單差不多，我們直接復(fù)制菜單的數(shù)據(jù)

export default {
    state:{
        isCollapse:false,//控制菜單展開/收起
        tabList:[
            {
                path: '/',
                name: 'home',
                label: '首頁',
                icon: 's-home',
                url: 'Home/home'
            },
        ]//面包屑數(shù)據(jù)
    },
    mutations:{
        ......
    }
}

當(dāng)點擊左側(cè)菜單時，面包屑的內(nèi)容相應(yīng)修改，所以我們修改 CommonAside.vue ，之前已經(jīng)有點擊菜單的方法，我們修改 menuClick，使用 this.$store.commit 來調(diào)用 selectMenu 方法，然后傳入點擊菜單的數(shù)據(jù)

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

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

// 更新面包屑數(shù)據(jù)
        selectMenu(state,val){
            // 判斷添加數(shù)據(jù)是否為首頁
            if(val.name !== 'home'){
                // 判斷如果不存在
                const index = state.tabList.findIndex(item => item.name === val.name )
                // 如果不存在
                if(index === -1){
                    state.tabList.push(val)
                }
            }
        }

由于面包屑默認(rèn)數(shù)據(jù)就是首頁，所以 selectMenu 方法先判斷是不是首頁，不是首頁再執(zhí)行下面的代碼

然后判斷 tabList 中是否存在所點擊的菜單數(shù)據(jù)，如果存在就沒有必要重復(fù)添加。是否存在可以使用 findIndex，傳入一個函數(shù)，如果存在則返回一個索引，如果不存在返回 -1

接下來我們在 CommonHeader.vue 中使用面包屑數(shù)據(jù)，當(dāng)然我們可以使用this.$store.state.tab.tabList來獲取，我們學(xué)習(xí)一個更簡單的方法，使用 mapstate

在這里插入代碼片

tags 是我們起的數(shù)據(jù)別名，后邊跟一個函數(shù)，返回的就是我們需要的數(shù)據(jù)，由于返回的是一個對象，我們使用擴展運算符 ...將 mapState 進(jìn)行結(jié)構(gòu)

然后面包屑內(nèi)容使用 v-for 循環(huán) tags 即可

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

樣式需要進(jìn)行修改

修改哪個 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 功能展示如下，點擊左側(cè)路由，tag 增加，點擊相應(yīng) tag 跳轉(zhuǎn)對應(yīng)路由，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){
      // 調(diào)用store中的mutation，刪除點擊的項
      this.closeTag(item)
      // 刪除后的tags長度
      const length = this.tags.length;
      // 刪除之后的跳轉(zhuǎn)邏輯
      // 1、如果不是刪除的當(dāng)前路由。根據(jù)name判斷是否相等。當(dāng)前路由不一定是最后一個
      if(item.name !== this.$route.name){
        // 那么直接刪除該項即可
        return
      }
      // 2、如果刪除的當(dāng)前路由,即選中的tag
      // 2.1 當(dāng)前路由在最后，也就是刪除最后一項
      if(index === length){
        // 那么需要跳轉(zhuǎn)到前一項
        this.$router.push({
          name: this.tags[index -1].name
        })
      }else{
        // 2.2 當(dāng)前路由不在最后一項
        // 那么跳轉(zhuǎn)到后一項
        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>

我們直接復(fù)制 Element UI 中的 tag 代碼復(fù)制過來，因為數(shù)據(jù)和面包屑的內(nèi)容是一樣的，所以我們可以直接獲取 vuex 中的面包屑數(shù)據(jù)，進(jìn)行 v-for 循環(huán)即可

用 closable 設(shè)置是否可關(guān)閉，首頁不可關(guān)閉，其他都可以

用 effect 設(shè)置主題，如果是當(dāng)前路由則使用深色主題

因為使用了$route.name === item.name?'dark':'plain' 即路由name 是否和當(dāng)前 tag name 相同，所以 router / index.js 中需要給路由添加 name 屬性

//2、將路由與組件進(jìn)行映射
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
        ]
    }
]

然后實現(xiàn)點擊事件，點擊相應(yīng) tag 應(yīng)該跳轉(zhuǎn)到相應(yīng)路由。在 tag 上增加 click 事件，傳入數(shù)據(jù)，加入路由即可

點擊刪除按鈕有一個相應(yīng)的事件（看官方文檔最后），在 tag 上增加 close 事件。功能相對復(fù)雜，需要分為幾種情況，注釋中都有

刪除數(shù)據(jù)本質(zhì)上是刪除 tabs.js 中的 tabList 數(shù)據(jù)，所以修改 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'
            },
        ]//面包屑數(shù)據(jù)
    },
    mutations:{
        ......
        // 刪除指定的 tag 數(shù)據(jù)，第一個參數(shù)是固定的
        closeTag(state,item){
            const index = state.tabList.findIndex(val=>val.name === item.name);
            state.tabList.splice(index,1);
        }
    }
}

1、刪除的不是當(dāng)前路由

2、刪除的是當(dāng)前路由，當(dāng)前路由在最后

3、刪除的是當(dāng)前路由，當(dāng)前路由在中間
文章來源地址http://www.zghlxwxcb.cn/news/detail-787162.html

到了這里，關(guān)于【Vue2+Element ui通用后臺】面包屑和tag功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！