Skip to content

Commit

Permalink
optimize side menu scroll bar when menu item overflow
Browse files Browse the repository at this point in the history
  • Loading branch information
@rector1024
rector1024 committed Sep 11, 2018
1 parent 83ce8ec commit b66a6a6
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 10 deletions.
9 changes: 7 additions & 2 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body, html { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%;
.menu-toggle { color: #fff; cursor: pointer; }
.menu-toggle:hover { color: #2d8cf0; }
.sider-logo-text { display: inline-block; transition: width .2s ease .2s; margin-left: 15px; font-size: 20px; }
.sider-logo { color: #fff; font-size: 18px; font-weight: 600; padding-top: 15px; padding-bottom: 10px; padding-left: 10px; line-height: 30px; vertical-align: middle; }
.sider-logo { color: #fff; font-size: 18px; font-weight: 600; padding-top: 15px; padding-bottom: 10px; padding-left: 10px; line-height: 24px; vertical-align: middle; }
.ivu-layout-sider-collapsed .sider-logo .sider-logo-text { white-space: nowrap; display: none; width: 0 !important; overflow: hidden; transition: width .2s ease; }
.sider-logo-icon { width: 0; display: inline-block; overflow: hidden; transition: all .3s; font-size: 16px; }
.ivu-layout-sider-collapsed .sider-logo-icon { margin-left: 18px; transition: all .3s; font-size: 24px; width: 24px; }
Expand All @@ -30,4 +30,9 @@ body, html { margin: 0; padding: 0; overflow: hidden; height: 100%; width: 100%;
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title { color: rgba(255,255,255,.7); }
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover { color: rgba(255,255,255,.7); }
.ivu-menu-submenu-title span > i, .ivu-menu-submenu-title > i{ margin-right: 1px;}
.ivu-layout-sider-collapsed .ivu-menu-vertical .ivu-menu-item, .ivu-layout-sider-collapsed .ivu-menu-vertical .ivu-menu-submenu-title { padding: 18px 24px; }
.ivu-layout-sider-collapsed .ivu-menu-vertical .ivu-menu-item, .ivu-layout-sider-collapsed .ivu-menu-vertical .ivu-menu-submenu-title { padding: 18px 24px; }
#sider_menu{height: 100%; overflow: auto;}
.ivu-menu-item > i{margin-right: 2px;}
#sider_menu .ivu-menu-item,#sider_menu .ivu-menu-submenu-title{padding-right: 5px;}
#sider_menu .ivu-menu-item{padding-top: 10px; padding-bottom: 10px;}
.collapsed-menu .ivu-menu-item{padding-top: 8px !important; padding-bottom: 8px !important;}
37 changes: 29 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
<div id="app">
<div class="layout">
<Layout>
<Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
<Sider ref="side1" hide-trigger collapsible :collapsed-width="80" v-model="isCollapsed">
<div class="sider-logo">
<span class="sider-logo-text">后台管理系统</span>
<Icon class="sider-logo-icon" type="md-home" size="24"></Icon>
</div>
<i-menu ref="myMenu" :active-name="currentTab.name" theme="dark" width="auto" :open-names="menuState.openNames"
accordion :class="menuitemClasses">
<i-menu id="sider_menu" ref="myMenu" :active-name="currentTab.name" theme="dark" width="auto"
:open-names="menuState.openNames" accordion :class="menuitemClasses" :style="{height:menuState.height+'px'}">
<template v-for="submenu in menu" :key="submenu.name">
<submenu :name="submenu.name">
<template slot="title">
Expand Down Expand Up @@ -124,7 +124,8 @@
windowHeight: 0,
frameHeight: 0,
menuState: {
openMenus: []
openMenus: [],
height: 300
},
tab: {
type: "line" //可选值:line,card
Expand All @@ -144,9 +145,21 @@
]
},
{
title: "基础资料", name: "2", icon: "logo-windows", menuItem: [
{ label: "系统设置", name: "2-1", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "系统环境", name: "2-2", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true }
title: "系统管理", name: "2", icon: "logo-windows", menuItem: [
{ label: "权限管理", name: "2-1", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "组织机构", name: "2-2", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "角色管理", name: "2-3", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "基础设置", name: "2-4", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "指标类别", name: "2-5", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "用户管理", name: "2-6", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "模块管理", name: "2-7", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "人员导入", name: "2-8", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "流程申请", name: "2-9", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "流程监管", name: "2-10", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "发布消息", name: "2-11", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "职位管理", name: "2-12", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true },
{ label: "系数管理", name: "2-13", href: "pages/basic/settings/index.html", icon: "logo-apple", closable: true },
{ label: "系统环境", name: "2-14", href: "pages/basic/settings/evn.html", icon: "logo-windows", closable: true }
]
},
{
Expand Down Expand Up @@ -184,16 +197,23 @@
window.removeEventListener('resize', this.handleResize)
},
mounted() {
this.calcFrameHeight();
this.init();
window.addEventListener('resize', this.handleResize);
this.handleMenuClick({ label: "首页", name: "1-0", href: "./pages/default.html", icon: "md-home", closable: false });

},
methods: {
init: function () {
this.calcFrameHeight();
this.calcSiderMenuHeight();
},
calcFrameHeight: function () {
this.windowHeight = (document.documentElement.scrollHeight || document.body.scrollHeight);
this.frameHeight = this.windowHeight - 95;
},
calcSiderMenuHeight: function () {
this.menuState.height = this.windowHeight - 50;
},
setCurrentTab: function (name) {
var tab = this.getTab(name);
var tabIndex = this.getTabIndex(name);
Expand Down Expand Up @@ -246,6 +266,7 @@
},
handleResize: function () {
this.calcFrameHeight();
this.calcSiderMenuHeight();
},
handleTabDropdownClick: function (name) {
switch (name) {
Expand Down

0 comments on commit b66a6a6

Please sign in to comment.