Vue + Element-ui實現後臺管理系統(3)---麪包屑 + Tag標籤切換功能

麪包屑 + Tag標籤切換功能

有關後臺管理系統以前寫過兩遍博客,看這篇以前最好先看下這兩篇博客。另外這裏只展現關鍵部分代碼，項目代碼放在github上： mall-manage-system

一、Vue + Element-ui實現後臺管理系統(1) --- 總述

二、Vue + Element-ui實現後臺管理系統(2)---項目搭建 + ⾸⻚佈局實現

這篇主要講解 麪包屑 + Tag標籤切換功能：

總體效果

說明 從上面圖片能夠看出，麪包屑是在head部分組件裏,Tag標籤雖然再也不head部分組件裏,可是它在整個管理後臺系統中是會一直存在的，因此須要在Main.vue中。

這兩塊功能的實現,主要依賴Element-ui兩個樣式 Breadcrumb 麪包屑 + Tag 標籤

1、麪包屑功能 

一、背景

整個大體邏輯是這樣的,首先是麪包屑 首頁 必定要存在的,接下來 側邊組件 點擊某菜單,把這個數據存到vuex中，而後 頭部組件 來獲取vuex中這個數據並展現。

二、CommonAside(側邊欄)

側邊欄須要作的就是當click當前菜單 就要把這個數據存儲到vuex中，爲了頭部組件來獲取展現這份數據。

這裏定義了一個click事件

methods: {
    //跳轉路由 根據名稱跳轉
    clickMenu(item) {
      //調用vuex的selectMenu方法存儲數據
      this.$store.commit('selectMenu', item)
      //跳轉路由
      this.$router.push({ name: item.name })
    }
  }

三、CommonHeader(頭部組件)

由於麪包屑是寫在CommonHeader中，因此這裏展現這部分代碼

<el-breadcrumb separator-class="el-icon-arrow-right">
                <!--很明顯 首頁 必定是存在的 因此這裏直接寫死-->
                <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
                <!--第二級菜單名稱 就要看左側組件有沒有點擊指定菜單，沒有那就只顯示首頁 點擊就顯示當前菜單名稱-->
                <el-breadcrumb-item :to="current.path" v-if="current" >{{current.label}}</el-breadcrumb-item>
 </el-breadcrumb>

<script>
  //js部分
    import { mapState } from 'vuex'
    export default {
        computed: {
          //獲取vuex數據的另外一種寫法
            ...mapState({
                current: state => state.tab.currentMenu
            })
        } 
    }
</script>

四、vuex配置

這裏用了一個屬性爲 currentMenu 的來存儲當前菜單信息

state: {
    //當前菜單
    currentMenu: null,
  },
  mutations: {
    selectMenu(state, val) {
    //若是點擊應該是首頁的話 要把這份數據清空 由於頭部組件已經把首頁寫死了 只有點擊不是首頁菜單才存儲當前菜單
     val.name === 'home' ? (state.currentMenu = null) : (state.currentMenu = val)
    }
  },
}

這樣整個麪包屑的功能就是實現了。

2、Tag標籤切換功能

一、背景

從上面效果來看，咱們發現：

一、首頁的tag一開始就會存在，並且是不能進行刪除的
二、當點擊左側欄的時候,若是tag沒有該菜單名稱則新增，若是已經有了那麼當前tag背景爲藍色。
三、刪除當前tag，若是是最後一個，那麼路由調整到它前面那個標籤而且背景變藍，若是不是最後一個那麼路由調整到它後面那個標籤而且背景變藍。
四、還有咱們注意這個tag不論路由如何切換都是會存在的，因此這個tag必定要存在咱們以前定義的Main.vue中。

二、CommonTab.vue(標籤組件)

<template>
  <div class="tabs">
    <!--closable這裏說明home是不能關閉的-->
    <el-tag
      :key="tag.name"
      size="small"
      v-for="(tag, index) in tags"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      @close="handleClose(tag, index)"
      @click="changeMenu(tag)"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
      //獲取vuex的標籤集合數據
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  methods: {
    ...mapMutations({
      close: 'closeTab'
    }),
    //關閉標籤
    handleClose(tag, index) {
      let length = this.tags.length - 1
      //vuex調方法的另外一種寫法
      this.close(tag)
      // 若是關閉的標籤不是當前路由的話，就不跳轉
      if (tag.name !== this.$route.name) {
        return
      }
      // 關閉的標籤是最右邊的話，往左邊跳轉一個
      if (index === length) {
        this.$router.push({ name: this.tags[index - 1].name })
      } else {
        // 不然往右邊跳轉
        this.$router.push({ name: this.tags[index].name })
      }
    },

    //選擇標籤跳轉路由
    changeMenu(item) {
      this.$router.push({ name: item.name })
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

三、vuex配置

export default {

    //存儲數據
    state: {
        currentMenu: null,
        tabsList: [
            {
                path: '/',
                name: 'home',
                label: '首頁',
                icon: 'home'
            }
        ]
    },
    //調用方法
    mutations: {

        //選擇標籤 選擇麪包屑
        selectMenu(state, val) {
            if (val.name === 'home') {
                state.currentMenu = null
            } else {
                state.currentMenu = val
                //若是等於-1說明tabsList不存在那麼插入，不然什麼都不作
                let result = state.tabsList.findIndex(item => item.name === val.name)
                result === -1 ? state.tabsList.push(val) : ''

            }
            // val.name === 'home' ? (state.currentMenu = null) : (state.currentMenu = val)
        },
        //關閉標籤
        closeTab(state, val) {
            let result = state.tabsList.findIndex(item => item.name === val.name)
            state.tabsList.splice(result, 1)
        },
    },
    actions: {}
}

四、Main.vue(主組件)

既然tag在整個後臺都要顯示，那麼就須要將CommonTab.vue加入到Main.vue中。

<template>
    <el-container style="height: 100%">
        <el-aside width="auto">
            <common-aside></common-aside>
        </el-aside>
        <el-container>
            <el-header>
                <common-header></common-header>
            </el-header>
            <!--加入CommonTab-->
            <common-tab></common-tab>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

具體的看完整項目吧，最上面已經給了github地址了。

別人罵我胖，我會生氣，由於我內心認可了我胖。別人說我矮，我就會以爲可笑，由於我內心知道我不可能矮。這就是咱們爲何會對別人的攻擊生氣。
攻我盾者，乃我心裏之矛(14)