<template>
|
<div class="index_nav">
|
<div class="head" :style="headerStyle">
|
<h1 @click="onIndex" :title="h1">
|
<el-image class="image" :src="logo"></el-image>
|
{{ h1 }}
|
</h1>
|
</div>
|
<v-tool-scroll
|
ids="index-nav-scroll"
|
class="tree"
|
:style="treeStyle"
|
@created="onCreated"
|
>
|
<el-menu
|
class="sidebar-el-menu"
|
:default-active="onRoutes"
|
background-color="rgb(1, 21, 40)"
|
text-color="#a8b4c0"
|
active-text-color="#fff"
|
unique-opened
|
router
|
>
|
<div v-for="(item, index) in nav" :key="index">
|
<template v-if="item.sysMenuVOList.length">
|
<el-submenu
|
:index="item.path ? item.path : index + 'f'"
|
:key="item.path"
|
>
|
<template slot="title">
|
<div class="fl-al">
|
<el-image class="icon-menu-style" :src="item.icon"></el-image>
|
<span slot="title">{{ item.menuName }}</span>
|
</div>
|
</template>
|
<template v-for="(subItem, ix) in item.sysMenuVOList">
|
<el-submenu
|
v-if="subItem.sysMenuVOList.length"
|
:index="subItem.path ? subItem.path : ix + 'c'"
|
:key="ix"
|
>
|
<template slot="title">{{ subItem.menuName }}</template>
|
<el-menu-item
|
v-for="(threeItem, i) in subItem.sysMenuVOList"
|
:key="i"
|
:index="threeItem.path ? threeItem.path : i + 'b'"
|
>{{ threeItem.menuName }}</el-menu-item
|
>
|
</el-submenu>
|
<el-menu-item
|
v-else
|
:index="subItem.path ? subItem.path : ix + 'd'"
|
:key="ix"
|
>{{ subItem.menuName }}</el-menu-item
|
>
|
</template>
|
</el-submenu>
|
</template>
|
<template v-else>
|
<el-menu-item
|
:index="item.path ? item.path : index + 'a'"
|
:key="index"
|
>
|
<div class="fl-al">
|
<el-image class="icon-menu-style" :src="item.icon"></el-image>
|
<span slot="title">{{ item.menuName }}</span>
|
</div>
|
</el-menu-item>
|
</template>
|
</div>
|
</el-menu>
|
</v-tool-scroll>
|
</div>
|
</template>
|
|
<script>
|
import ico from "../../../static/image/ico.png";
|
export default {
|
props: {
|
path: { type: String, default: "" },
|
title: { type: String, default: "" },
|
vxt: { type: [String, Number], default: "" },
|
grade: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
},
|
data() {
|
return {
|
nav: [],
|
defaultProps: {
|
children: "sysMenuVOList",
|
label: "menuName",
|
},
|
id: "",
|
pid: [],
|
now: {},
|
url: [],
|
area: "",
|
scroll: null,
|
h1: "",
|
logo: ico,
|
theme: {
|
body: "rgb(1,21,40)",
|
child: "#38f",
|
header: "rgb(2,34,63)",
|
headerColor: "#fff",
|
},
|
activeId: -1,
|
newPath: "",
|
};
|
},
|
computed: {
|
treeStyle() {
|
return { background: this.theme.body };
|
},
|
headerStyle() {
|
return { background: this.theme.header, color: this.theme.headerColor };
|
},
|
childStyle() {
|
return { background: this.theme.child };
|
},
|
onRoutes() {
|
return this.$route.path;
|
},
|
},
|
watch: {
|
grade: {
|
handler() {
|
this.setGrade();
|
},
|
deep: true,
|
},
|
title(n) {
|
this.h1 = n;
|
},
|
},
|
methods: {
|
onIndex() {
|
// this.$router.push(this.$nav.url("/index"));
|
},
|
onCreated(v) {
|
this.scroll = v.scroll;
|
},
|
handleNodeClick(v, a, b) {
|
this.$nextTick(() => {
|
this.scroll && this.scroll.refresh();
|
});
|
if (v.children && v.children.length) return 0;
|
|
if (this.activeId === v.id) return 0;
|
if (v.path) {
|
this.$router.push(v.path);
|
}
|
// this.$router.push(v.url ? v.url : "/rand" + demo.rand(6));
|
// this.id = v.id;
|
// this.$refs.treeDom.setCheckedKeys([v.id]);
|
// this.now = v;
|
// demo.$save.status("nav", v);
|
},
|
location(n) {},
|
setGrade() {
|
let n = this.$nav.index(this.grade);
|
this.url = n
|
.map((k) => {
|
return k.url;
|
})
|
.filter((l) => {
|
return l !== "";
|
});
|
this.nav = demo.$local.get("menuList") ? demo.$local.get("menuList") : [];
|
},
|
checkTheme() {
|
let tn = demo.$local.get("theme-nav-color") || {};
|
if (tn.body) {
|
this.theme = tn;
|
}
|
},
|
},
|
mounted() {
|
this.h1 = this.title || this.$js.title;
|
this.checkTheme();
|
this.setGrade();
|
},
|
};
|
</script>
|
<style lang='less'>
|
.sidebar-el-menu {
|
width: 100%;
|
}
|
.el-submenu__title {
|
height: 48px;
|
display: flex;
|
align-items: center;
|
}
|
.el-menu-item.is-active {
|
height: 48px;
|
display: flex;
|
align-items: center;
|
}
|
.el-icon-arrow-down:before {
|
content: "\e790" !important;
|
}
|
.el-menu-item {
|
height: 48px !important;
|
display: flex;
|
align-items: center;
|
}
|
// 菜单移入效果
|
.el-submenu .el-menu-item:hover {
|
color: #fff !important;
|
}
|
.el-submenu__title:hover {
|
color: #fff !important;
|
}
|
.el-menu-item.is-active {
|
background-color: rgb(51, 136, 255) !important;
|
} // 菜单选中颜色
|
.index_nav {
|
height: 100%;
|
.head {
|
height: 64px;
|
box-sizing: border-box;
|
padding: 16px 5px;
|
h1 {
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
font-weight: 700;
|
text-align: center;
|
overflow: hidden;
|
cursor: pointer;
|
}
|
.image {
|
width: 32px;
|
height: 32px;
|
display: inline-block;
|
vertical-align: top;
|
img {
|
display: block;
|
}
|
}
|
}
|
.z {
|
z-index: 10;
|
position: relative;
|
transition: all 0.2s;
|
padding-left: 27px;
|
&.c {
|
color: #fff;
|
}
|
&:hover {
|
color: #eee;
|
}
|
}
|
.icon {
|
width: 20px;
|
height: 20px;
|
z-index: 11;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
left: 16px;
|
& + .z {
|
padding-left: 45px;
|
}
|
}
|
.cover,
|
.active {
|
position: absolute;
|
z-index: 8;
|
left: 0;
|
top: 0;
|
height: 100%;
|
box-sizing: border-box;
|
width: 100%;
|
}
|
.cover {
|
// box-shadow: 0 0 15px #f0f0f0;
|
// border-left: 6px solid #2ea9fe;
|
}
|
.active {
|
// border-left: 3px solid #2ea9fe;
|
background-color: #38f;
|
}
|
.el-tree,
|
.el-tree-node__content:hover,
|
.el-tree-node:focus > .el-tree-node__content {
|
background-color: transparent;
|
color: #aaa;
|
}
|
.el-tree-node > .el-tree-node__children {
|
overflow: visible;
|
}
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
// display: none;
|
position: absolute;
|
right: 10px;
|
top: 0;
|
bottom: 0;
|
margin: auto;
|
width: 12px;
|
height: 24px;
|
line-height: 24px;
|
text-align: center;
|
}
|
.el-tree-node__expand-icon {
|
&:not(.is-leaf) {
|
transform: rotate(90deg) !important;
|
color: rgb(178, 178, 178);
|
}
|
&.expanded {
|
color: #fff;
|
transform: rotate(-90deg) !important;
|
}
|
}
|
.tree {
|
height: calc(~"100% - 64px") !important;
|
font-size: 12px;
|
}
|
.tree_small {
|
height: 36px;
|
line-height: 36px;
|
display: inline-block;
|
}
|
.tree_small .n_ico {
|
margin: 7px;
|
}
|
.tree_auto .n_ico {
|
margin-right: 5px;
|
}
|
.tree_auto {
|
display: inline-block;
|
height: 60px;
|
line-height: 60px;
|
box-sizing: border-box;
|
color: rgb(168, 180, 192);
|
}
|
.el-tree-node__content {
|
height: auto;
|
position: relative;
|
}
|
}
|
.icon-menu-style {
|
margin-right: 4px;
|
margin-bottom: 2px;
|
width: 15px;
|
height: 15px;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
