Skip to content

F
founder_vue
Commit 726c8984 by xue_wengang
Options

菜单样式修改

parent 8220eee5
Showing with 119 additions and 98 deletions
src/assets/styles/leftMenu.scss
...@@ -21,8 +21,9 @@ ...@@ -21,8 +21,9 @@
/deep/ .el-submenu__title:hover{ /deep/ .el-submenu__title:hover{
background-color:#ecf5ff !important; background-color:#ecf5ff !important;
} }
/deep/ .el-menu.el-menu--inline li{padding-left:63px !important;} /* /deep/ .el-menu.el-menu--inline li{padding-left:50px !important;} */
/deep/ .el-submenu__icon-arrow{font-size:15px;} /deep/ .el-submenu__icon-arrow{font-size:15px;}
/deep/ .el-submenu .el-menu {padding-left: 22px;}
} }
} }
src/views/ryda/leftMenu.vue
<template> <template>
<!--左侧导航--> <!--左侧导航-->
<div <div
class="leftMenu" class="leftMenu"
:style="{ width: isCollapse == true ? '0px' : '224px' }" :style="{ width: isCollapse == true ? '0px' : '224px' }"
>
<!--<div @click="isCollapse=!isCollapse" style="width:51px;text-align:center;color:#409EFF;cursor: pointer;line-height:36px;" :title="isCollapse == true?'展开':'收缩'"><i class="fa fa-bars"></i></div>-->
<el-menu
@select="changeSidebar"
:default-active="currentBar"
class="el-menu-vertical-demo"
@open="handleMenuOpen"
@close="handleMenuClose"
:collapse="isCollapse"
active-text-color="#409EFF"
background-color="#fff"
text-color="#545c64"
> >
<!--<div @click="isCollapse=!isCollapse" style="width:51px;text-align:center;color:#409EFF;cursor: pointer;line-height:36px;" :title="isCollapse == true?'展开':'收缩'"><i class="fa fa-bars"></i></div>--> <div v-for="item in leftMenu" :key="item.index">
<el-menu <!--没有子级菜单的情况-->
@select="changeSidebar" <el-menu-item
:default-active="currentBar" :index="item.index"
class="el-menu-vertical-demo" :name="item.index"
@open="handleMenuOpen" v-if="!item.children"
@close="handleMenuClose"
:collapse="isCollapse"
active-text-color="#409EFF"
background-color="#fff"
text-color="#545c64"
> >
<div v-for="item in leftMenu" :key="item.index" class="three_children"> <i :class="item.className"></i>
<!--没有子级菜单的情况--> <span slot="title">{{ item.label }}</span>
<el-menu-item </el-menu-item>
:index="item.index" <div v-else class="three_children" style="color:#fff">
:name="item.index" <el-submenu :index="item.index">
v-if="!item.children" <template slot="title">
> <i :class="item.className"></i>
<i :class="item.className"></i> <span>{{ item.label }}</span>
<span slot="title">{{ item.label }}</span> </template>
</el-menu-item> <el-menu-item
<el-submenu :index="item.index" v-else> :index="item2.index"
<template slot="title"> :name="item2.index"
<i :class="item.className"></i> v-for="(item2, index2) in item.children"
<span>{{ item.label }}</span> :key="index2"
</template> ><i :class="item2.className"><span>{{ item2.label }}</span></i></el-menu-item
<el-menu-item :index="item2.index" :name="item2.index" v-for="(item2,index2) in item.children" :key="index2"><i :class="item2.className"></i>{{item2.label}}</el-menu-item> >
</el-submenu> </el-submenu>
</div> </div>
</div>
</el-menu> </el-menu>
<!--<img src="../assets/img/leftMenuCover.png" style="width:180px;margin-left: 10px;" v-show="isCollapse==false">--> <!--<img src="../assets/img/leftMenuCover.png" style="width:180px;margin-left: 10px;" v-show="isCollapse==false">-->
</div> </div>
</template> </template>
<script> <script>
import "@/assets/styles/font-awesome.min.css"; import "@/assets/styles/font-awesome.min.css";
export default { export default {
name: "leftMenu", name: "leftMenu",
props: { props: {
propLeftMenu: { propLeftMenu: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
sidebarItemName: String sidebarItemName: String,
}, },
data() { data() {
return { return {
isCollapse: false, isCollapse: false,
leftMenu: this.propLeftMenu, leftMenu: this.propLeftMenu,
currentBar: '1', currentBar: "1",
csidebarItemName:this.sidebarItemName csidebarItemName: this.sidebarItemName,
};
},
watch: {
sidebarItemName(val) {
if(val=='ykpgbg'||val=='fwrz'){
this.csidebarItemName="dwfwyktj";
}
}
},
methods: {
handleMenuOpen(key, keyPath) {
console.log(key, keyPath);
},
handleMenuClose(key, keyPath) {
console.log(key, keyPath);
},
changeSidebar(index) {
this.$emit("changeSidebarIndex", index, this.leftMenu);
}
},
mounted() {
let self = this;
if(self.csidebarItemName=='dlrz'||self.csidebarItemName=='gnsyrz'||self.csidebarItemName=='gnfwtj'||self.csidebarItemName=='ldfwrz'){//访问运控菜单
let index = self.leftMenu.findIndex(item => item.id == 'fwyk');
self.leftMenu[index].children.forEach(item2 => {
if(item2.id == self.csidebarItemName){
self.currentBar = (item2.index).toString();
}
});
}else{
if(self.csidebarItemName=='ykpgbg'||self.csidebarItemName=='fwrz'){
self.csidebarItemName="dwfwyktj";
}
let index = self.leftMenu.findIndex(item => item.id == self.csidebarItemName);
self.currentBar = (index + 1).toString();
}
}
}; };
},
watch: {
sidebarItemName(val) {
if (val == "ykpgbg" || val == "fwrz") {
this.csidebarItemName = "dwfwyktj";
}
},
},
methods: {
handleMenuOpen(key, keyPath) {
console.log(key, keyPath);
},
handleMenuClose(key, keyPath) {
console.log(key, keyPath);
},
changeSidebar(index) {
this.$emit("changeSidebarIndex", index, this.leftMenu);
},
},
mounted() {
let self = this;
if (
self.csidebarItemName == "dlrz" ||
self.csidebarItemName == "gnsyrz" ||
self.csidebarItemName == "gnfwtj" ||
self.csidebarItemName == "ldfwrz"
) {
//访问运控菜单
let index = self.leftMenu.findIndex((item) => item.id == "fwyk");
self.leftMenu[index].children.forEach((item2) => {
if (item2.id == self.csidebarItemName) {
self.currentBar = item2.index.toString();
}
});
} else {
if (
self.csidebarItemName == "ykpgbg" ||
self.csidebarItemName == "fwrz"
) {
self.csidebarItemName = "dwfwyktj";
}
let index = self.leftMenu.findIndex(
(item) => item.id == self.csidebarItemName
);
self.currentBar = (index + 1).toString();
}
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/leftMenu.scss"; @import "../../assets/styles/leftMenu.scss";
.leftMenu .el-menu /deep/ .el-menu-item{padding-left:60px !important;font-size:16px !important;} .leftMenu .el-menu /deep/ .el-menu-item {
body .leftMenu /deep/ .el-menu-item:hover { padding-left: 60px !important;
background: transparent !important; font-size: 16px !important;
} }
.three_children /deep/ .el-submenu__title{padding-left:0px !important;} body .leftMenu /deep/ .el-menu-item:hover {
background: transparent !important;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment