lisang
/
iview-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

进一步优化收缩菜单下拉菜单

This commit is contained in:
zhigang.li@tendcloud.com 2018-09-20 11:13:28 +08:00
parent 82b733a8e9
commit 5ed857d502
3 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/main/components/side-menu/collapsed-menu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Dropdown ref="dropdown" @on-click="handleClick" class="collased-menu-dropdown" :transfer="hideTitle" :placement="placement"> <Dropdown ref="dropdown" @on-click="handleClick" :class="hideTitle ? '' : 'collased-menu-dropdown'" :transfer="hideTitle" :placement="placement">
<a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/></a> <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/></a>
<DropdownMenu ref="dropdown" slot="list"> <DropdownMenu ref="dropdown" slot="list">
<template v-for="child in children"> <template v-for="child in children">

45
src/view/main/main.less
View File

@ -45,24 +45,31 @@
.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i { .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
margin-right: 8px !important; margin-right: 8px !important;
} }
.ivu-select-dropdown.ivu-dropdown-transfer{ .collased-menu-dropdown{
max-height: 1000px; width: 100%;
& div.ivu-dropdown{ margin: 0;
width: 100%; line-height: normal;
margin: 0; padding: 7px 0 6px 16px;
line-height: normal; clear: both;
padding: 7px 0 6px 16px; font-size: 12px !important;
clear: both; white-space: nowrap;
font-size: 12px !important; list-style: none;
white-space: nowrap; cursor: pointer;
list-style: none; transition: background 0.2s ease-in-out;
cursor: pointer; &:hover{
transition: background 0.2s ease-in-out; background: rgba(100, 100, 100, 0.1);
&:hover{ }
background: rgba(100, 100, 100, 0.1); & * {
} color: #515a6e;
& * { }
color: #515a6e; .ivu-menu-item > i{
} margin-right: 12px !important;
}
.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
margin-right: 8px !important;
} }
} }
.ivu-select-dropdown.ivu-dropdown-transfer{
max-height: 400px;
}

2
src/view/main/main.vue
View File

@ -136,12 +136,12 @@ export default {
}, },
watch: { watch: {
'$route' (newRoute) { '$route' (newRoute) {
console.log(newRoute)
this.setBreadCrumb(newRoute.matched) this.setBreadCrumb(newRoute.matched)
this.setTagNavList(getNewTagList(this.tagNavList, newRoute)) this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
} }
}, },
mounted () { mounted () {
console.log(123123123131231)
/** /**
* @description 初始化设置面包屑导航和标签导航 * @description 初始化设置面包屑导航和标签导航
*/ */