home.vue · 我的网页程序

``` <template> <el-container class="home-container">  <el-header> <div> <img src="@/assets/logo.png" alt > <span>admin</span>  <el-button @click="toggleCollapse" style="margin-left:54px;">|||</el-button> </div>  <div> <span><i class="fas fa-user"></i> {{user.username}}</span> <el-dropdown @command="handleCommand"> <span class="el-dropdown-link"><i class="el-icon-s-tools el-icon--right"></i> 切换</span> <el-dropdown-menu slot="dropdown"> <div v-for="i in Authority" :key="i.id-1" :index="i.id-1+''" > <el-dropdown-item :command="i.s_id"><i class="i.icon"></i>{{i.username}}</el-dropdown-item> </div> </el-dropdown-menu> </el-dropdown> <el-dropdown @command="handleCommand"> <span class="el-dropdown-link">设置<i class="el-icon-arrow-down el-icon--right"></i></span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="password"><i class="fas fa-key"></i>修改密码</el-dropdown-item> <el-dropdown-item divided split-button command="logout"><i class="fas fa-share-square"></i>退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </el-header>  <el-container>   <el-aside :width="isCollapse ?'0px':'200px'"> <el-menu :unique-opened="true" :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath" class="el-menu-vertical-demo" background-color="#f5f5f5" text-color="#00925D" active-text-color="#00925D" @open="handleOpen" @close="handleClose" >    <el-submenu v-for="item in menulist" :key="item.id" :index="item.id+''" > <template slot="title">  <i :class="item.icon"/>  <span>{{ item.autName }}</span> </template>  <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/'+subItem.path" @click="saveNavState('/'+subItem.path)" >  <i :class="subItem.icon" />  <template slot="title"> {{ subItem.authName }} </template> </el-menu-item> </el-submenu> </el-menu> </el-aside>  <el-container>  <el-main>  <router-view /> </el-main>   </el-container> </el-container> </el-container>  </template> <script> export default { // 数据绑定 data () { return { menulist: [], Authority: [], user: [], s_id: '', // menulist: [ // { id: '0', autName: '用户管理', children: [{ id: '0-0', authName: '用户列表', path: 'users' }] }, // { id: '1', autName: '业务数据', children: [{ id: '1-0', authName: 123, path: 'user2' }] }, // { id: '2', autName: '信息修改', children: [{ id: '2-0', authName: 123, path: 'user3' }] } // ], // iconsObj: { // 0: 'el-icon-user-solid', // 1: 'el-icon-platform-eleme', // 2: 'el-icon-user-solid' // }, // 是否折叠 isCollapse: false, // 被激活的链接地址 activePath: '' } }, // 生命周期函数 created () { this.getMenuList() this.activePath = window.sessionStorage.getItem('activePath') }, // 监听,当路由发生变化的时候执行 watch: { $route (to, from) { console.log(to.path) } }, // 事件处理函数 methods: { handleOpen (key, keyPath) { // console.log(key, keyPath) }, handleClose (key, keyPath) { // console.log(key, keyPath) }, logout () { window.sessionStorage.clear() // 本地清空 this.$router.push('/login') // 跳转页面 }, handleCommand (command) { // this.$message('click on item ' + command) password if (command === 'logout') { window.sessionStorage.clear() // 本地清空 this.$router.push('/login') // 跳转页面 this.$message.success('退出登录') } else if (command === 'password') { this.$message.success('password') } else { this.$message.success('切换成功') this.s_id = command this.getMenuList() } }, // 获取所有的菜单 async getMenuList () { const { data: res } = await this.$http.get('login/menus?s_id=' + this.s_id) if (res.code !== 1) return this.$message.error(res.msg) // console.log(res) this.menulist = res.data this.Authority = res.admin this.user = res.user this.s_id = res.user.s_id // console.log(this.Authority) }, // 点击按钮，折叠与展开 toggleCollapse () { this.isCollapse = !this.isCollapse }, // 保存链接激活状态 saveNavState (activePath) { window.sessionStorage.setItem('activePath', activePath) this.activePath = activePath } } } </script> <style lang="less" scoped> @bag100: #00925D; @bag80: #00A377; @bag60: #62B896; @bag:#f5f5f5; .home-container { height: 100%; } .el-header { color: #333; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 20px; background-color:@bag100; z-index: 999; box-shadow: 0.1vw 0.2vw 1vw #aaa; > div { display: flex; align-items: center; img { width: 50px; } span { margin-left: 15px; } } } .el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px; } .el-aside { display: flex; background-color: @bag; box-shadow:0.2vw 0.3vw 0.2vw 0.2vw #aaa; z-index:999; color: #333; line-height: 200px; .el-menu{border-right: none;} } .el-main { background-color: #e9eef3; color: #333; // text-align: center; // line-height: 160px; } body > .el-container { margin-bottom: 40px; } // .el-container:nth-child(5) .el-aside, // .el-container:nth-child(6) .el-aside { // line-height: 260px; // } // .el-container:nth-child(7) .el-aside { // line-height: 320px; // } .iconfont{ margin-right: 15px; } .toggle-button{ background-color: @bag80; font-size: 10px; line-height: 40px; width: 40px; text-align: center; letter-spacing: 0.2em; // padding: 0 20px; margin-left: 54px; } .el-dropdown-menu,.el-menu,.el-submenu__title{ position: relative; // display: flex; // flex-direction:column; z-index: 9999; width: 200px; } .el-submenu__title i,.el-menu-item i{ color: @bag100; } .el-dropdown-link { cursor: pointer; color: #fff; } .el-main{ background-color: #fff; } </style> ```