vue-element-ui佈局
阿新 • • 發佈:2020-07-15
<el-header> 頭部區域
<el-container> 主體區域
<el-aside>側邊欄
<el-menu> 選單
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath"> <!-- 一級選單 --> <el-submenu :index="item.id+ ''" v-for="item in menulist" :key="item.id"> <!-- 一級選單模板區域 --> <template slot="title"> <!-- 圖示 --> <i :class="iconsObj[item.id]"></i> <!-- 文字 --> <span>{{item.authName}}</span> </template> <!--二級選單--> <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)"> <!-- 二級選單模板區域 --> <template slot="title"> <!-- 圖示 --> <i class="el-icon-menu"></i> <!-- 文字 --> <span>{{subItem.authName}}</span> </template> </el-menu-item> </el-submenu> </el-menu>
<template slot>作用域插槽,是對元件的擴充套件,通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參;
二級選單:el-menu-item :index="'/'+subItem.path" :index指定預設路由為'/'+subItem.path"
<template> <el-container class="home-container"> <!-- 頭部區域 --> <el-header> <div> <img src="../assets/heima.png" alt=""> <span>電商後臺管理系統</span> </div> <el-button type="info" @click="logout">退出</el-button> </el-header> <!-- 頁面主體區域 --> <el-container> <!-- 側邊欄 --> <el-aside :width="isCollapse ? '64px':'200px'"> <!-- 摺疊展開 --> <div class="toggle-button" @click="toggleCollapse">|||</div> <!-- 側邊欄選單區域 --> <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath"> <!-- 一級選單 --> <el-submenu :index="item.id+ ''" v-for="item in menulist" :key="item.id"> <!-- 一級選單模板區域 --> <template slot="title"> <!-- 圖示 --> <i :class="iconsObj[item.id]"></i> <!-- 文字 --> <span>{{item.authName}}</span> </template> <!--二級選單--> <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)"> <!-- 二級選單模板區域 --> <template slot="title"> <!-- 圖示 --> <i class="el-icon-menu"></i> <!-- 文字 --> <span>{{subItem.authName}}</span> </template> </el-menu-item> </el-submenu> </el-menu> </el-aside> <!-- 內容--> <el-main> <!-- 路由佔位符 --> <router-view></router-view> </el-main> </el-container> </el-container> </template> <script> export default { data() { return { menulist: [], iconsObj: { '125': 'iconfont icon-user', '103': 'iconfont icon-tijikongjian', '101': 'iconfont icon-shangpin', '102': 'iconfont icon-danju', '145': 'iconfont icon-baobiao' }, isCollapse: false, //是否摺疊 activePath: '' //被啟用的連結地址 } }, created() { this.getMenuList() this.activePath = window.sessionStorage.getItem('activePath') }, methods: { logout(){ window.sessionStorage.clear() this.$router.push('/login') }, // 獲取所有的選單 async getMenuList() { const {data: res} = await this.$http.get('menus') // console.log(res) if (res.meta.status != 200) return this.$message.error(res.meta.msg) this.menulist = res.data }, // 點選切換選單摺疊與展開 toggleCollapse(){ this.isCollapse = !this.isCollapse }, // 儲存連結的啟用狀態 saveNavState(activePath){ window.sessionStorage.setItem('activePath',activePath) // 記憶到session, 重新整理後不忘記 this.activePath = activePath } } } </script> <style lang="less" scoped> .home-container{ height: 100%; } .el-header{ background-color: #373D41; display: flex; justify-content: space-between; padding-left: 0; align-items: center; color: #fff; font-size: 20px; div{ display: flex; align-items: center; span{ margin-left: 15px; } } } .el-aside{ background-color: #333744; .el-menu{ border-right: none; } } .el-main{ background-color: #EAEDF1; } .iconfont{ margin-right: 10px; } .toggle-button{ background-color: #4A5064; font-size: 10px; line-height: 24px; color: #fff; text-align: center; letter-spacing: 0.2em; cursor: pointer; } </style>