<template>
  <el-container class="main-container">
    <el-aside v-bind:class="asideClass">
      <LeftNav></LeftNav>
    </el-aside>
    <el-container>
      <el-header class="main-header">
        <TopNav></TopNav>
      </el-header>
      <el-main class="main-center">首頁(yè)</el-main>
    </el-container>
  </el-container>
</template>

<script>
  // 導(dǎo)入組件
  import TopNav from '@/components/TopNav.vue'
  import LeftNav from '@/components/LeftNav.vue'

  // 導(dǎo)出模塊
  export default {
    //組件名稱(chēng)
    name: 'AppMain',

    data: function() {
      return {
        asideClass: 'main-aside',
      }
    },

    //將import的組件定義的Main中以便于使用
    components: {
      TopNav,
      LeftNav
    },
    created() {
      this.$root.Bus.$on('aaa', r => {
        this.asideClass = r ? 'main-aside-collapsed' : 'main-aside';
      });
    }
  };
</script>
<style scoped>
  .main-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .main-aside-collapsed {
    /* 在CSS中，通過(guò)對(duì)某一樣式聲明! important ，可以更改默認(rèn)的CSS樣式優(yōu)先級(jí)規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級(jí) */
    width: 64px !important;
    height: 100%;
    background-color: #e2b100;
    margin: 0px;
  }

  .main-aside {
    width: 240px !important;
    height: 100%;
    background-color: #e2b100;
    margin: 0px;
  }

  .main-header,
  .main-center {
    padding: 0px;
    border-left: 2px solid #dedede;
  }
</style>

2. LegtNav.vue 左側(cè)菜單

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#ffbf00" text-color="#fff"
    active-text-color="#ffd04b" :collapse="collapsed">
    <div class="logobox">
      <img class="logoimg" src="../assets/imgs/logo.png" alt="">
    </div>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>導(dǎo)航一</span>
      </template>
      <el-menu-item-group>
        <template slot="title">分組一</template>
        <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
        <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分組2">
        <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">選項(xiàng)4</template>
        <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">導(dǎo)航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">導(dǎo)航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">導(dǎo)航四</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
  export default {
    name: 'LeftNav',

    data: function() {
      return {
        collapsed: false
      }
    },
    created() {
      this.$root.Bus.$on('aaa', r => {
        this.collapsed = r;
      });
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    min-height: 400px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }

  .el-menu-item-group__title {
    padding: 0px;
  }

  .el-menu-bg {
    background-color: #ffbf00 !important;
  }

  .el-menu {
    border: none;
  }

  .logobox {
    height: 40px;
    line-height: 40px;
    color: #9d9d9d;
    font-size: 20px;
    text-align: center;
    padding: 20px 0px;
  }

  .logoimg {
    height: 40px;
  }
</style>

3. TopNav.vue 頂部導(dǎo)航欄

<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#ffbf00" text-color="#fff" active-text-color="#fff">
    <el-button class="buttonimg">
      <img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    </el-button>
    <el-submenu index="2" class="submenu">
      <template slot="title">超級(jí)管理員</template>
      <el-menu-item index="2-1">設(shè)置</el-menu-item>
      <el-menu-item index="2-2">個(gè)人中心</el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    name: 'TopNav',

    data: function() {
      return {
        collapsed: false,
        //require是node中遵循CommonJS規(guī)范的模塊化解決方案,支持動(dòng)態(tài)引入
        imgshow: require('@/assets/imgs/show.png'),
        imgsq: require('@/assets/imgs/sq.png')
      }
    },
    methods: {
      doToggle() { //收起左側(cè)菜單事件
        this.collapsed = !this.collapsed;
        //將是否折疊的變量放入總線(xiàn)
        this.$root.Bus.$emit('aaa', this.collapsed);
      },
      exit() { //退出事件
        //跳轉(zhuǎn)登錄界面
        this.$router.push("/")
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
  }

  .submenu {
    float: right;
  }

  .buttonimg {
    height: 60px;
    background-color: transparent;
    border: none;
  }

  .showimg {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 17px;
    left: 17px;
  }

  .showimg:active {
    border: none;
  }
</style>

2.2 配置路由

router/index.js， 配置路由前先導(dǎo)入Main組件

import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'

?將LeftNav和TopNav子組件配置到AppMain總?cè)萜髦校?/p>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },{
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },{
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        }
      ]
    }
  ]
})

?

2.3?組件顯示折疊和展示圖標(biāo)

TopNav.vue：?

LeftNav.vue：?

?

2.4 總線(xiàn)完成組件通信

如果要完成組件整合，需要通過(guò)定義總線(xiàn)將父組件（AppMain）與子組件進(jìn)行通信；

src/mai.js：

new Vue({
  el: '#app',
  data() {
    return {
      /* 創(chuàng)建一個(gè)Bus總線(xiàn) */
      Bus: new Vue()
    }
  },
  router,
  components: {
    App
  },
  template: '<App/>'
})

TopNav.vue：?

把是否折疊的變量放入總線(xiàn)中方便其他組件調(diào)取。?

LeftNav：

?在組件創(chuàng)建時(shí)訂閱了一個(gè)名為?'aaa'?的事件，并在事件觸發(fā)時(shí)將接收到的數(shù)據(jù)賦值給?collapsed?屬性。

?

?

AppMain.vue：

在組件創(chuàng)建時(shí)訂閱了一個(gè)名為?'aaa'?的事件，并在事件觸發(fā)時(shí)將接收到的數(shù)據(jù)賦值給?asideClass屬性（通過(guò)true或false賦予相應(yīng)的樣式）。

?

2.5 效果展示

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-716903.html

到了這里，關(guān)于【Vue】Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！