<template>
<div class="navMenu">
<template v-for="menu in navMenus">
<el-submenu
:key="menu.path"
:index="menu.path"
v-if="menu.children.length > 0"
class="mul-menu-item"
>
<template slot="title">
<i
style="font-size: 14px; margin-right: 12px"
:class="menu.iconClass"
></i>
<span slot="title">{{ menu.name }}</span>
</template>
<NavMenu :navMenus="menu.children"></NavMenu>
</el-submenu>
<el-menu-item
:key="menu.path"
v-else-if="menu.path == '/znjk'"
@click="znjkOnclick('/znjk')"
>
<i
style="font-size: 14px; margin-right: 12px"
:class="menu.iconClass"
></i>
<span slot="title">{{ menu.name }}</span>
</el-menu-item>
<!-- 特殊处理 -->
<el-menu-item
:key="menu.path"
v-else-if="menu.path == '/static/page_data/jy-analysis.html'"
@click="specialClick(menu.path)"
>
<i
style="font-size: 14px; margin-right: 12px"
:class="menu.iconClass"
></i>
<span slot="title">{{ menu.name }}</span>
</el-menu-item>
<el-menu-item
:key="menu.path"
v-else-if="menu.path == '/static/page_data/yq-analysis.html'"
@click="specialClick(menu.path)"
>
<i
style="font-size: 14px; margin-right: 12px"
:class="menu.iconClass"
></i>
<span slot="title">{{ menu.name }}</span>
</el-menu-item>
<el-menu-item :key="menu.path" :index="menu.path" v-else>
<i
style="font-size: 14px; margin-right: 12px"
:class="menu.iconClass"
></i>
<span slot="title">{{ menu.name }}</span>
</el-menu-item>
</template>
</div>
</template>
<script>
export default {
name: "NavMenu",
props: ["navMenus"],
data() {
return {};
},
methods: {
znjkOnclick(name) {
localStorage.setItem("gotoRouter", "znjk");
let routeData = this.$router.resolve({
//去掉开头防使用index做router的#符
path: "/znjk".replace("#", "")
});
// window.open(routeData.href, "_blank");
// 因为智能监控这个模块使用的是webrtc 所以要使用http
window.open(
"http://" + window.location.host + "" + routeData.href + "",
"_blank"
);
},
specialClick(valuePath) {
localStorage.setItem("gotoRouter", "znjk");
let routeData = this.$router.resolve({
//去掉开头防使用index做router的#符
path: valuePath.replace("#", "")
});
window.open(routeData.href, "_blank");
}
}
};
</script>
<style lang="stylus" scoped>
.navMenu .el-menu-item {
background-color: #000c17;
}
.el-input, .el-textarea, .el-select {
width: 50% !important;
}
>>>.el-menu {
font-weight: bold;
border-right: transparent !important;
}
>>> .el-menu {
border-right: 1px solid transparent;
}
.el-submenu [class^='el-icon'], .el-menu-item [class^='el-icon'] {
width: 14px;
height: 12px;
margin-right: 16px;
}
.el-submenu [class^='el-icon'], .el-menu-item [class^='el-icon'] {
margin-right: 16px;
}
.el-submenu__title i {
color: rgb(167, 177, 194);
}
.mul-menu-item :hover {
color: #fff !important;
}
.el-menu-item i {
color: rgb(167, 177, 194);
}
.mul-menu-item .el-menu-item, .mul-menu-item/deep/.el-submenu /deep/ .el-submenu__title {
background-color: #000c17 !important;
color: #fff;
}
.mul-menu-item .is-active {
color: #fff !important;
background-color: #2771fa !important;
}
.is-active {
color: #fff !important;
background-color: #2771fa !important;
}
.el-menu-item-group li.el-menu-item {
background-color: #000c17 !important;
padding-left: 75px !important;
border: 1px solid #000;
}
</style>