element六 header处理与联动,tabs实现

一、实现头部

image.png

• CommonHeader.vue中

<template>
        <header>
            <div class="l-content">
                <el-button type="primary" icon="el-icon-menu" size="mini"></el-button>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="r-content">
                    <el-dropdown trigger="click" size="small">
                        <span class="el-dropdown-link">
                            <img :src="userImg" class="user">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </div>
        </header>
</template>

• 样式调整

  
  image.png
• 引入图片注意使用

<script>
    export default {
        data() {
            return {
                userImg: require('../assets/images/zhong.jpg')
            }
        },
    }
</script>

二、侧栏与头部面包屑联动

• vuex实现，点击侧栏触发方法

  
  image.png
  

  1.侧栏触发：

  
  image.png

        methods: {
            clickMenu(item){
                this.$store.commit('selectMenu',item)
            }
        },

2.定义 vuex--tab.js

export default{
    state:{
        menu:[],
        currentMenu:null
    },
    mutations:{
        selectMenu(state, val){
            //过滤掉首页
            val.name ==='home'? state.currentMenu = null : state.currentMenu =val
        }
    },
    actions:{
        
    }
}

3.header接收

image.png image.png

三、侧栏与tabs互动

image.png

• 修改tab.js。与tabs的互动也是触发selectMenu，点击侧栏。

  
  image.png

• CommonTab.vue

  
  image.png

四、main板块与侧栏、面包屑和tag的联动

image.png
image.png

• 点侧栏改变main板块内容
  注意：如果vue-router版本过高，相同路由下跳转相同路由会报错

1. commonAside.vue中

   
   image.png

2. Main.vue中

   
   image.png

• 点tags改变main板块内容

1. commonTab.vue中

   
   image.png

四、侧栏伸展

image.png

1.CommonHeader.vue中

image.png
image.png

2.vuex中tab.js

• 改变true和false的值

  
  image.png

3. CommonAside.vue

   
   image.png
   

   4.style添加（收展时卡顿）

.el-menu-vertical-demo:not(.el-menu--collapse){
    width: 200px;
    min-height: 400px;
}