vue中element UI導航選單(可摺疊式)(導航列表根據後臺資料渲染)
阿新 • • 發佈:2018-12-21
版本一:可摺疊式,資料前臺自定義
<template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-active="defaultActive" class="el-menu-vertical" router unique-opened :collapse="iscollapse" :collapse-transition="false" active-text-color='#29A88D' background-color="#272D34" text-color="#fff" @open="handleOpen" @close="handleClose"> <div id="logo" index="/index"> <img src="../assets/img/logo.png" class="logo"> <span class="tohide">XXXXXXXX</span> </div> <el-menu-item index="/index/home"> <i class="icon iconfont icon-home"></i> <span slot="title">總覽</span> </el-menu-item> <el-menu-item index="/index/plate"> <i class="icon iconfont icon-iconsp1"></i> <span slot="title">版塊管理</span> </el-menu-item> <el-submenu index="/index/activity"> <template slot="title"> <i class="icon iconfont icon-shangpinshengou"></i> <span>活動管理</span> </template> <el-menu-item index="/index/activity"> <i class="icon iconfont icon-dian"></i> <span>活動管理</span> </el-menu-item> <el-menu-item index="/index/classify"> <i class="icon iconfont icon-dian"></i> <span>分類管理</span> </el-menu-item> </el-submenu> <el-submenu index="/index/goods"> <template slot="title"> <i class="icon iconfont icon-shangpinliebiao"></i> <span>商品管理</span> </template> <el-menu-item index="/index/goods"> <i class="icon iconfont icon-dian"></i> <span>商品管理</span> </el-menu-item> <el-menu-item index="/index/sort"> <i class="icon iconfont icon-dian"></i> <span>分類管理</span> </el-menu-item> <el-menu-item index="/index/freight"> <i class="icon iconfont icon-dian"></i> <span>運費管理</span> </el-menu-item> </el-submenu> </el-menu> <div class="iscollapse" @click="setcollapse"> <i class="el-icon-arrow-right" v-if="iscollapse"></i> <i class="el-icon-arrow-left" v-else></i> </div> </el-aside> <div class="rightContainer"> <el-header class="header"> XXX </el-header> <el-main> <router-view></router-view> </el-main> <div class="foot"> XXX </div> </div> </div> </template> <script> import $ from "jquery"; export default { name: "index", data() { return { defaultActive: "/index/home", iscollapse: false, logourl: require("../assets/img/logo.jpg"), username: null, show: false }; }, methods: { setcollapse() { this.iscollapse = !this.iscollapse; if (this.iscollapse) { $("#logo").css("width", "64px"); $(".el-aside").css("width", "auto"); $(".tohide").css("display", "none"); } else { $("#logo").css("width", "auto"); $(".el-aside").css("width", "152px"); $(".tohide").css("display", "inline"); } } }, mounted() {} }; </script> <style scoped> /* 側邊欄 */ #index { display: flex; } .el-aside { background: #272d34; height: 100vh; /* position: relative; */ } .el-menu-vertical { border-right: 0; } .el-submenu .el-menu-item { min-width: 150px; } .el-menu-vertical i { color: #fff !important; font-size: 14px !important; } .is-active { background: #1890ff !important; color: #fff !important; } #logo { width: 100%; height: 70px; display: flex; align-items: center; background: #272d34; color: #fff; overflow: hidden; } .logo { width: 22px; display: block; margin: 0 10px 0 20px; } .iscollapse { background: #283644; color: #fff; width: 100%; height: 50px; padding-top: 8px; text-align: center; } .el-aside .iscollapse i { font-size: 40px !important; } /* .tac::-webkit-scrollbar { display: none; } */ #index .rightContainer { height: 100vh; overflow: auto; flex: 1; /* display: flex; flex-direction: column; */ } /* 右邊頭部 */ .el-header { height: 50px !important; background: #fff !important; padding: 0 !important; line-height: 50px; } .header ul { display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid #e5e6e7; } .header li { padding: 0 8px; cursor: pointer; position: relative; } .header .lines { font-weight: 900; color: #dfdfdf; } .header .help span { color: #2477e7; } .header .operate { height: 50px; padding-right: 20px; } .header .prove { /* display: none; */ width: 100px; position: absolute; z-index: 999; top: 50px; right: 0px; left: 0; padding: 5px 0px; margin: auto; background: #fff; color: #999; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 3px 0 #ccc; } .header .prove p { line-height: 30px; padding: 0px 10px; } .header .prove p:hover { background: rgba(24, 144, 255, 0.1); } .header i { color: #2477e7; } .header .user i { margin-left: 10px; } .header .prove i { color: #999; margin-right: 5px; } .header .user { display: flex; align-items: center; } .header .operate span { color: #333; display: block; min-width: 50px; } .header img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } /* 右邊主體部分 */ .el-main { padding: 0 !important; background: #f7f7f7; } /* 右邊底部 */ .foot { text-align: center; font-size: 12px; padding: 15px; /* height: 80px !important; */ color: #999; background: #f7f7f7; display: flex; flex-direction: column; align-items: center; } .foot span { line-height: 22px; transform: scale(0.83); } </style>
需求改變:導航資料要從後臺獲取再渲染
版本二:可摺疊式,資料後臺獲取並渲染(css同上)
<template> <div id="index"> <el-aside width="152px" class="asideNav"> <el-menu :default-active="defaultActive" class="el-menu-vertical" router unique-opened :collapse="iscollapse" :collapse-transition="false" active-text-color='#29A88D' background-color="#272D34" text-color="#fff" @open="handleOpen" @close="handleClose"> <div id="logo" index="/index"> <img src="../assets/img/logo.png" class="logo"> <span class="tohide">XXXXXXXX</span> </div> <div v-for="(item,i) in routers" :key="i"> <el-submenu :index="item.newcondition" v-if="item.child"> <template slot="title"> <i :class="item.newicon"></i> <span class="tohide">{{item.title}}</span> </template> <el-menu-item :index="val.newcondition" v-for="val in item.child" :key="val.title"> <i class="icon iconfont">*</i> <span>{{val.title}}</span> </el-menu-item> </el-submenu> <el-menu-item :index="item.newcondition" v-else > <i :class="item.newicon"></i> <span slot="title">{{item.title}}</span> </el-menu-item> </div> </el-menu> <div class="iscollapse" @click="setcollapse"> <i class="el-icon-arrow-right" v-if="iscollapse"></i> <i class="el-icon-arrow-left" v-else></i> </div> </el-aside> <div class="rightContainer"> <el-header class="header"> XXX </el-header> <el-main> <router-view></router-view> </el-main> <div class="foot"> XXX </div> </div> </div> </template> <script> import $ from "jquery"; export default { name: "index", data() { return { defaultActive: "/index/home", iscollapse: false, logourl: require("../assets/img/logo.jpg"), username: null, show: false }; }, methods: { setcollapse() { this.iscollapse = !this.iscollapse; this.$nextTick(() => { if (this.iscollapse) { $("#logo").css("width", "64px"); $(".el-aside").css("width", "auto"); $(".tohide,.el-submenu__title .el-icon-arrow-right").css( "display", "none" ); } else { $("#logo").css("width", "auto"); $(".el-aside").css("width", "152px"); $(".tohide,.el-submenu__title .el-icon-arrow-right").css( "display", "inline" ); } }); } }, mounted() {} }; </script>