```
<template>
<el-container class="home-container">
<!-- 头部区域 -->
<el-header>
<div>
<img
src="@/assets/logo.png"
alt
>
<span>admin</span>
<!-- <div
class="toggle-button"
@click="toggleCollapse"
>
|||
</div> -->
<el-button @click="toggleCollapse" style="margin-left:54px;">|||</el-button>
</div>
<!-- <el-button @click="logout"> 退出 </el-button> -->
<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="200px"> -->
<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 key="0" index="0" >
<template slot="title">
<i :class="el-icon-user-solid"/>
<span>控制面板</span>
</template>
</el-submenu> -->
<!-- 一级菜单 -->
<el-submenu
v-for="item in menulist"
:key="item.id"
:index="item.id+''"
>
<template slot="title">
<!-- 图标 iconsObj[item.id]-->
<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)"
>
<!-- 图标 el-icon-menu-->
<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-footer>Footer</el-footer> -->
</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>
```
- HTML
- 讯飞插件
- Python
- 王者荣耀
- demo_cg.py
- demo_cg_TT.py
- img.py
- MySQL
- 清空表数据
- ID自增长重置
- 用户密码及权限操作
- 外键在数据库中的作用
- MySQL增删改查语句
- DDL-数据库操作
- DDL-表操作-查询
- DDL-表操作-创建
- DDL-表操作-数据类型
- DDL-表操作-修改
- DDL-表操作-删除
- DML-语句
- DML-添加数据
- DML-修改数据
- DML-删除数据
- DQL-语法
- DQL-基本查询
- DQL-条件查询
- DQL-聚合函数
- DQL-分组查询
- DQL-排序查询
- DQL-分页查询
- DCL-介绍
- DCL-管理用户
- DCL-权限控制
- 函数
- JS
- ajax
- ajax get请求
- ajax post提交
- ajax 同时上传文本和文件到数据库(inpt text和input file)
- 路径传值+接收解析
- js 本地sessionStorage
- js Excel导出.xls
- 二维码生成插件
- VUE-CLI4
- 安装手脚架及插件
- ECharts-数据可视化
- element-ui-时间戳
- qrcode二维码生成插件
- vuedraggable-拖拽组件
- vue-drag-resize-自由拖拽、缩放组件
- gitee配置
- src
- plugins
- element.js
- echartsMixin.js
- views
- login
- login.vue
- btn.vue
- home
- home.vue
- Welcome.vue
- user
- users.vue
- router
- main.js
- App.vue
- 引入语法
- 获取路径传值
- ajax请求
- token语法
- NPM更换镜像方案
- PHP
- PHP 微信网页登录
- PHP 判断函数
- PHP 获取微信公众号openid
- PHP 实现发送模板消息(微信公众号版)
- PHP 阳历阴历转换计算生肖闰年
- PHP 接口数组形式
- PHP 同文件夹下顺序命名
- PHP 输出文件
- PHP E-mail发送
- PHP cURL资源
- PHP 远程访问控制服务器
- PHP 8.0 开启mysqli扩展
- PHP 使用 OSS 批量上传图片
- PHP md5 加密与解密
- ThinkPHP
- PT6
- TP6安装多应用
- TP5
- view渲染模板常见语法
- Visual Studio Code
- 介绍
- 插件-eslint
- vs code插件
- VSCode添加自定义模板
- SFTP
- md格式的文档
- mermaid
- frp内网穿透
- 自定义端口
- ui-china.cn
- 常用软件
- 框架
- 服务器
- 微信小程序
- 云函数 Email
- 参数传递
- 其他
- VMware虚拟机centos7设置静态ip 连接外网