<template>
<div class="left-menu-container">
<el-menu
:default-active="defaultActive"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
active-text-color="#409EFF"
:router="true"
>
<template v-for="(item, index) in menuList">
<!-- 如果第一层有子菜单，则继续循环 -->
<template v-if="item.children">
<el-submenu class="first-menu" :key="item.key + Math.random()" :index="item.key">
<template slot="title">
<span class="first-title">
<div>{
{ item.name }}</div>
</span>
</template>
<!-- 第二层 -->
<template v-for="(secondItem, secondIndex) in item.children">
<!-- 如果第二层有子菜单，则继续循环 -->
<template v-if="secondItem.children">
<el-submenu
class="second-menu"
:key="secondIndex"
:index="secondItem.key"
>
<template slot="title">
<span class="badge-orange"></span>
<div>{
{ secondItem.name }}</div>
</template>
<!-- 第三层 -->
<!-- <template v-for="(thirdItem, thirdIndex) in secondItem.children"> -->
<!-- 如果第三层有子菜单，则继续循环 -->
<!-- <template v-if="thirdItem.children"> -->
<!-- <el-menu-item key="1-1" index="speech-synthesis-online" class="third-menu third-menu-item">产品介绍</el-menu-item> -->
<el-menu-item
key="1-1"
:index="secondItem.children[0].path"
class="third-menu third-menu-item"
>产品介绍</el-menu-item
>
<el-submenu index="1-1-2" class="third-menu">
<template slot="title">开发文档</template>
<!-- 第四层 -->
<el-menu-item
v-for="(forthItem, forthIndex) in secondItem.children[1]
.children"
:key="forthIndex"
:index="forthItem.path"
class="forth-menu"
>
<div>{
{ forthItem.name }}</div>
</el-menu-item>
<!-- <el-menu-item index="1-1-2-1" class="forth-menu">接口1</el-menu-item>
<el-menu-item index="1-1-2-2" class="forth-menu">接口2</el-menu-item> -->
</el-submenu>
<el-menu-item :index="secondItem.path">
<div >{
{ secondItem.name }}</div>
</el-menu-item>
</template> -->
<!-- </template> -->
</el-submenu>
</template>
<!-- 如果第二层没有子菜单 我的应用 -->
<template v-else>
<el-menu-item
:key="secondIndex"
:index="secondItem.path"
class="second-menu second-menu-item"
>
<span slot="title">
<span class="badge-orange"></span>
<div>{
{ secondItem.name }}</div>
</span>
</el-menu-item>
</template>
</template>
</el-submenu>
<div class="line" :key="item.key"></div>
</template>
<!-- 如果第一层没有子菜单 声音库 -->
<template v-else>
<el-menu-item
:key="index"
:index="item.path"
class="first-menu first-menu-item">
<span slot="title" class="first-title">
<div>{
{ item.name }}</div>
</span>
</el-menu-item>
<div class="line" :key="item.key"></div>
</template>
</template>
</el-menu>
</div>
</template>
<script>
export default {
name: "leftMenu",
data() {
return {
defaultActive: "",
menuList: [
{
icon: "apiyuyinhechengsel",
name: "语音合成",
key: "speechSynthesis",
children: [
{
key: "1-1",
name: "在线语音合成",
children: [
{
key: "speechSynthesisOnline",
name: "产品介绍",
path: "speech-synthesis-online"
},
{
key: "1-2-2",
name: "开发文档",
children: []
}
]
}
]
},
{
icon: "apishengyinkusel",
name: "声音库",
key: "soundLibrary",
path: "sound-library"
}
]
};
},
watch: {
$route: {
handler() {
this.routerChange();
},
deep: true
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath, "open");
},
handleClose(key, keyPath) {
console.log(key, keyPath, "close");
}
}
};
</script>
<style lang="less" scoped>
.left-menu-container {
flex: none;
width: 230px;
height: calc(100vh - 78px);
border-radius: 0px 0px 8px 0px;
font-size: 16px;
font-family: HarmonyOS_Sans;
color: #333333;
padding-top: 14px;
background: #fff;
border-right: 1px solid #e5e5e5;
// box-sizing: border-box;
// overflow: hidden;
user-select: none;
:deep(.el-menu) {
border: 0;
.el-submenu {
.divider {
width: 160px;
height: 0;
margin: 0 auto;
}
}
.el-submenu__title {
padding: 0 !important;
height: 40px;
line-height: 40px;
font-size: 16px;
padding-left: 12px !important;
}
.el-menu-item {
height: 40px;
min-width: auto;
div {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 138px;
}
}
.el-menu-item.is-active {
background: rgba(53, 131, 251, 0.14);
background: rgba(53, 131, 251, 0.14);
border-radius: 8px;
span {
font-weight: 500;
font-family: HarmonyOS_Sans_SC_Medium;
color: #3583fb;
}
}
.line {
width: 182px;
height: 1px;
background: #eff1f5;
margin: 0 24px;
}
.noChild {
.el-submenu__icon-arrow,
.el-icon-arrow-down {
display: none;
}
}
.first-menu {
font-size: 16px;
font-family: HarmonyOS_Sans_SC_Medium;
color: #666666;
line-height: 40px;
text-align: left;
padding: 0 !important;
margin: 6px 12px;
.first-title {
margin-left: 10px;
}
span {
color: #666666;
}
.el-submenu__icon-arrow,
.el-icon-arrow-down {
right: 12px;
font-size: 12px;
color: #333333;
}
}
.first-menu .el-submenu__title:hover {
background: rgba(53, 131, 251, 0.08);
border-radius: 8px;
}
.first-menu-item {
padding-left: 12px !important;
}
.second-menu {
font-size: 14px;
font-family: HarmonyOS_Sans_SC;
color: #666666;
padding: 0 !important;
.el-submenu__title {
color: #666666;
font-size: 14px;
}
.badge-orange {
width: 4px;
height: 4px;
background: #f96b14;
display: inline-block;
border-radius: 50%;
margin-right: 9px;
margin-left: 28px;
margin-bottom: 3px;
}
.el-menu-item {
padding: 0;
}
}
.first-menu-item:hover,
.third-menu-item:hover,
.forth-menu:hover,
.second-menu-item:hover {
background: rgba(53, 131, 251, 0.08);
border-radius: 8px;
}
.second-menu:nth-child(3n + 2) .badge-orange {
background: #0085ff;
}
.second-menu:nth-child(3n + 3) .badge-orange {
background: #28ba00;
}
// .second-menu .el-submenu__title:hover {
// background: rgba(53, 131, 251, 0.14);
// border-radius: 8px;
// color: #3583fb;
// }
.second-menu-item {
padding-left: 12px !important;
line-height: 40px;
}
.third-menu {
font-size: 12px;
font-family: HarmonyOS_Sans_SC;
color: #666666;
margin-left: 42px;
.el-submenu__icon-arrow,
.el-icon-arrow-down {
font-size: 10px;
}
.el-submenu__title {
color: #666666;
font-size: 12px;
}
}
.third-menu-item {
padding-left: 12px !important;
line-height: 40px;
}
.forth-menu {
font-size: 12px;
font-family: HarmonyOS_Sans_SC;
color: #666666;
line-height: 40px;
padding: 0px !important;
padding-left: 26px !important;
}
}
}
</style>