|
|
<template>
|
|
|
<!-- 左侧导航栏组件 -->
|
|
|
<el-aside class="index-aside" height="100vh" width="210px"> <!-- 定义左侧导航栏宽度和高度 -->
|
|
|
<div class="index-aside-inner menulist" style="height:100%"> <!-- 内部容器，设置高度为100% -->
|
|
|
<div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item" style="height:100%;broder:0;background-color:#988181"> <!-- 遍历菜单列表，根据角色显示对应菜单 -->
|
|
|
<div class="menulistImg" style="backgroundColor:#ff0000;padding:25px 0" v-if="false && menulistStyle == 'vertical'"> <!-- 图片展示区域（条件未满足时隐藏） -->
|
|
|
<el-image v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" /> <!-- 显示图片 -->
|
|
|
</div>
|
|
|
<el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;" background-color="#988181" text-color="#111010" active-text-color="#99EFED" default-active="0"> <!-- 垂直菜单，设置背景色、文字颜色等 -->
|
|
|
<el-menu-item index="0" :style="menulistBorderBottom" @click="menuHandler('')"><i v-if="true" class="el-icon-s-home" />首页</el-menu-item> <!-- 首页菜单项 -->
|
|
|
<el-submenu :index="1+''" :style="menulistBorderBottom"> <!-- 子菜单：个人中心 -->
|
|
|
<template slot="title">
|
|
|
<i v-if="true" class="el-icon-user-solid" /> <!-- 图标 -->
|
|
|
<span>个人中心</span> <!-- 菜单标题 -->
|
|
|
</template>
|
|
|
<el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item> <!-- 修改密码子菜单 -->
|
|
|
<el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item> <!-- 个人信息子菜单 -->
|
|
|
</el-submenu>
|
|
|
<el-submenu :style="menulistBorderBottom" v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''"> <!-- 动态生成的子菜单 -->
|
|
|
<template slot="title">
|
|
|
<i v-if="true" :class="icons[index]" /> <!-- 图标 -->
|
|
|
<span>{{ menu.menu }}</span> <!-- 菜单标题 -->
|
|
|
</template>
|
|
|
<el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item> <!-- 动态生成的子菜单项 -->
|
|
|
</el-submenu>
|
|
|
</el-menu>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import menu from '@/utils/menu' // 导入菜单工具
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
menuList: [], // 菜单列表数据
|
|
|
dynamicMenuRoutes: [], // 动态路由数据
|
|
|
role: '', // 当前用户角色
|
|
|
icons: [ // 图标数组
|
|
|
'el-icon-s-cooperation',
|
|
|
'el-icon-s-order',
|
|
|
'el-icon-s-platform',
|
|
|
'el-icon-s-fold',
|
|
|
'el-icon-s-unfold',
|
|
|
'el-icon-s-operation',
|
|
|
'el-icon-s-promotion',
|
|
|
'el-icon-s-release',
|
|
|
'el-icon-s-ticket',
|
|
|
'el-icon-s-management',
|
|
|
'el-icon-s-open',
|
|
|
'el-icon-s-shop',
|
|
|
'el-icon-s-marketing',
|
|
|
'el-icon-s-flag',
|
|
|
'el-icon-s-comment',
|
|
|
'el-icon-s-finance',
|
|
|
'el-icon-s-claim',
|
|
|
'el-icon-s-custom',
|
|
|
'el-icon-s-opportunity',
|
|
|
'el-icon-s-data',
|
|
|
'el-icon-s-check',
|
|
|
'el-icon-s-grid',
|
|
|
'el-icon-menu',
|
|
|
'el-icon-chat-dot-square',
|
|
|
'el-icon-message',
|
|
|
'el-icon-postcard',
|
|
|
'el-icon-position',
|
|
|
'el-icon-microphone',
|
|
|
'el-icon-close-notification',
|
|
|
'el-icon-bangzhu',
|
|
|
'el-icon-time',
|
|
|
'el-icon-odometer',
|
|
|
'el-icon-crop',
|
|
|
'el-icon-aim',
|
|
|
'el-icon-switch-button',
|
|
|
'el-icon-full-screen',
|
|
|
'el-icon-copy-document',
|
|
|
'el-icon-mic',
|
|
|
'el-icon-stopwatch',
|
|
|
],
|
|
|
menulistStyle: 'vertical', // 菜单样式，默认垂直
|
|
|
menulistBorderBottom: {}, // 菜单项底部边框样式
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
const menus = menu.list() // 获取菜单列表
|
|
|
this.menuList = menus // 设置菜单列表
|
|
|
this.role = this.$storage.get('role') // 获取当前用户角色
|
|
|
},
|
|
|
created() {
|
|
|
setTimeout(() => {
|
|
|
this.menulistStyleChange() // 初始化菜单样式
|
|
|
}, 10)
|
|
|
this.icons.sort(() => { // 打乱图标顺序
|
|
|
return (0.5 - Math.random())
|
|
|
})
|
|
|
this.lineBorder() // 设置菜单项边框样式
|
|
|
},
|
|
|
methods: {
|
|
|
lineBorder() {
|
|
|
let style = 'vertical' // 菜单样式
|
|
|
let w = '1px' // 边框宽度
|
|
|
let s = 'solid' // 边框样式
|
|
|
let c = '#ccc' // 边框颜色
|
|
|
if(style == 'vertical') { // 如果是垂直菜单
|
|
|
this.menulistBorderBottom = { // 设置底部边框样式
|
|
|
borderBottomWidth: w,
|
|
|
borderBottomStyle: s,
|
|
|
borderBottomColor: c
|
|
|
}
|
|
|
} else { // 如果是水平菜单
|
|
|
this.menulistBorderBottom = { // 设置右侧边框样式
|
|
|
borderRightWidth: w,
|
|
|
borderRightStyle: s,
|
|
|
borderRightColor: c
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
menuHandler(name) { // 菜单点击事件处理函数
|
|
|
let router = this.$router // 获取路由实例
|
|
|
name = '/' + name // 拼接路径
|
|
|
router.push(name) // 路由跳转
|
|
|
},
|
|
|
// 设置菜单项悬停时的背景颜色
|
|
|
setMenulistHoverColor() {
|
|
|
let that = this
|
|
|
this.$nextTick(() => {
|
|
|
document.querySelectorAll('.menulist .el-menu-item').forEach(el => { // 遍历菜单项
|
|
|
el.addEventListener("mouseenter", e => { // 鼠标进入事件
|
|
|
e.stopPropagation()
|
|
|
el.style.backgroundColor = "rgba(238, 221, 129, 1)" // 设置背景颜色
|
|
|
})
|
|
|
el.addEventListener("mouseleave", e => { // 鼠标离开事件
|
|
|
e.stopPropagation()
|
|
|
el.style.backgroundColor = "#988181" // 恢复背景颜色
|
|
|
})
|
|
|
el.addEventListener("focus", e => { // 聚焦事件
|
|
|
e.stopPropagation()
|
|
|
el.style.backgroundColor = "rgba(238, 221, 129, 1)" // 设置背景颜色
|
|
|
})
|
|
|
})
|
|
|
document.querySelectorAll('.menulist .el-submenu__title').forEach(el => { // 遍历子菜单标题
|
|
|
el.addEventListener("mouseenter", e => { // 鼠标进入事件
|
|
|
e.stopPropagation()
|
|
|
el.style.backgroundColor = "rgba(238, 221, 129, 1)" // 设置背景颜色
|
|
|
})
|
|
|
el.addEventListener("mouseleave", e => { // 鼠标离开事件
|
|
|
e.stopPropagation()
|
|
|
el.style.backgroundColor = "#988181" // 恢复背景颜色
|
|
|
})
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 设置菜单图标的颜色
|
|
|
setMenulistIconColor() {
|
|
|
this.$nextTick(() => {
|
|
|
document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el => {
|
|
|
el.style.color = "rgba(153, 153, 153, 1)" // 设置图标颜色
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
// 根据菜单样式调整布局
|
|
|
menulistStyleChange() {
|
|
|
this.setMenulistIconColor() // 设置图标颜色
|
|
|
this.setMenulistHoverColor() // 设置悬停效果
|
|
|
this.setMenulistStyleHeightChange() // 设置菜单项高度
|
|
|
let str = "vertical" // 默认垂直菜单
|
|
|
if ("horizontal" === str) { // 如果是水平菜单
|
|
|
this.$nextTick(() => {
|
|
|
document.querySelectorAll('.el-container .el-container').forEach(el => { // 调整容器布局
|
|
|
el.style.display = "block"
|
|
|
el.style.paddingTop = "60px" // 设置顶部内边距
|
|
|
})
|
|
|
document.querySelectorAll('.el-aside').forEach(el => { // 调整侧边栏布局
|
|
|
el.style.width = "100%"
|
|
|
el.style.height = "62px"
|
|
|
el.style.paddingTop = '0'
|
|
|
})
|
|
|
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => { // 调整内部容器布局
|
|
|
el.style.paddingTop = '0'
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
if ("vertical" === str) { // 如果是垂直菜单
|
|
|
this.$nextTick(() => {
|
|
|
document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => { // 调整内部容器布局
|
|
|
el.style.paddingTop = "60px"
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 设置菜单项的高度
|
|
|
setMenulistStyleHeightChange() {
|
|
|
this.$nextTick(() => {
|
|
|
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el => {
|
|
|
el.style.height = "62px" // 设置高度
|
|
|
el.style.lineHeight = "62px" // 设置行高
|
|
|
})
|
|
|
document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el => {
|
|
|
el.style.height = "62px" // 设置高度
|
|
|
el.style.lineHeight = "62px" // 设置行高
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.index-aside {
|
|
|
position: relative; // 设置相对定位
|
|
|
overflow: hidden; // 隐藏溢出内容
|
|
|
|
|
|
.menulistImg {
|
|
|
padding: 24px 0; // 设置上下内边距
|
|
|
box-sizing: border-box; // 使用标准盒模型
|
|
|
|
|
|
.el-image {
|
|
|
margin: 0 auto; // 居中对齐
|
|
|
width: 100px; // 设置宽度
|
|
|
height: 100px; // 设置高度
|
|
|
border-radius: 100%; // 设置圆角
|
|
|
display: block; // 设置为块级元素
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.index-aside-inner {
|
|
|
height: 100%; // 设置高度为100%
|
|
|
margin-right: -17px; // 设置右侧外边距
|
|
|
margin-bottom: -17px; // 设置底部外边距
|
|
|
overflow: scroll; // 启用滚动条
|
|
|
overflow-x: hidden !important; // 隐藏水平滚动条
|
|
|
padding-top: 60px; // 设置顶部内边距
|
|
|
box-sizing: border-box; // 使用标准盒模型
|
|
|
|
|
|
&:focus {
|
|
|
outline: none; // 移除聚焦时的默认边框
|
|
|
}
|
|
|
|
|
|
.el-menu {
|
|
|
border: 0; // 移除边框
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
