<template>
<div class="divmenu">
<el-row class="tac">
<el-col>
<img src="../assets/logo3.png" style="width:100%">
<el-menu
:default-active="this.$route.path"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
text-color="#fff"
active-text-color="#fff"
router
unique-opened
>
<el-menu-item index="/home" @click="title1()">
<i class="el-icon-s-home"></i>
<span slot="title">Home Page</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-edit"></i>
<span>Product Request</span>
</template>
<el-menu-item-group>
<el-menu-item index="/home/add" background-color="#00203e" @click="title2()">Add New
<i class="el-icon-circle-plus-outline" style="position: relative;left: 100px;"></i>
</el-menu-item>
<el-menu-item index="/home/viewall" style="background-color:#000;" @click="title5()">View All</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="/home/todolist" @click="title6()">
<i class="el-icon-document"></i>
<span slot="title">My to-do List</span>
</el-menu-item>
<el-menu-item index="/home/myaccout" @click="title3()">
<i class="el-icon-s-custom"></i>
<span slot="title">My Accout</span>
</el-menu-item>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-setting"></i>
<span>Admin Setting</span>
</template>
<el-menu-item-group>
<el-menu-item index="/home/addaccessrole" background-color="#00203e" @click="title4()">Add Access Role
<i class="el-icon-circle-plus-outline" style="position: relative;left: 48px;"></i>
</el-menu-item>
<el-menu-item index="/home/accessuserlist" style="background-color:#000;" @click="title7()">Access User List</el-menu-item>
<el-menu-item index="/home/accessrolelist" style="background-color:#000;" @click="title8()">Access Role List</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'Menu',
data(){
return {
tt1:'Home Page',
tt2:'',
}
},
methods:{
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
title1(){
this.$emit('title',{tt1:'Home Page',tt2:''})
},
title2(){
this.$emit('title',{tt1:'Product Request',tt2:'| Add New'});
},
title3(){
this.$emit('title',{tt1:'My Account ',tt2:''})
},
title4(){
this.$emit('title',{tt1:'Admin Settings',tt2:'| Add Access Role'})
},
title5(){
this.$emit('title',{tt1:'Product Request',tt2:'| View All'})
},
title6(){
this.$emit('title',{tt1:'My to-do List',tt2:''})
},
title7(){
this.$emit('title',{tt1:'Admin Settings',tt2:'| Access User List'})
},
title8(){
this.$emit('title',{tt1:'Admin Settings',tt2:'| Access Role List'})
}
}
}
</script>
<style>
.el-menu-vertical-demo{
border: 0px;
}
.divmenu .el-col{
background-color: #16538c;
}
.el-menu{
text-align: left;
}
.el-submenu{
border-bottom: 0.1px solid rgb(50, 50, 50);
}
.el-menu-item{
border-bottom: 1px solid rgb(50, 50, 50);
}
.el-menu-item.is-active{
background-color:#1890ff!important;
}
.el-submenu.is-active{
background-color:#004C93!important;
}
.el-menu{
background-color: #00203e;
}
.el-menu-item-group {
background-color: black;
}
.el-menu-item-group .el-menu-item :hover{
background-color: rgb(233, 233, 233);
}
.el-menu-item-group__title{
padding: 0;
}
</style>