Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
0e4ea087
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
0e4ea087
编写于
5月 02, 2018
作者:
花
花裤衩
提交者:
GitHub
5月 02, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat[sidebar]: add resonsive sidebar (#636)
上级
88429bd8
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
104 addition
and
4 deletion
+104
-4
src/store/getters.js
src/store/getters.js
+1
-0
src/store/modules/app.js
src/store/modules/app.js
+18
-1
src/styles/sidebar.scss
src/styles/sidebar.scss
+31
-2
src/views/layout/Layout.vue
src/views/layout/Layout.vue
+13
-1
src/views/layout/mixin/ResizeHandler.js
src/views/layout/mixin/ResizeHandler.js
+41
-0
未找到文件。
src/store/getters.js
浏览文件 @
0e4ea087
const
getters
=
{
sidebar
:
state
=>
state
.
app
.
sidebar
,
language
:
state
=>
state
.
app
.
language
,
device
:
state
=>
state
.
app
.
device
,
visitedViews
:
state
=>
state
.
tagsView
.
visitedViews
,
cachedViews
:
state
=>
state
.
tagsView
.
cachedViews
,
token
:
state
=>
state
.
user
.
token
,
...
...
src/store/modules/app.js
浏览文件 @
0e4ea087
...
...
@@ -3,8 +3,10 @@ import Cookies from 'js-cookie'
const
app
=
{
state
:
{
sidebar
:
{
opened
:
!+
Cookies
.
get
(
'
sidebarStatus
'
)
opened
:
!+
Cookies
.
get
(
'
sidebarStatus
'
),
withoutAnimation
:
false
},
device
:
'
desktop
'
,
language
:
Cookies
.
get
(
'
language
'
)
||
'
en
'
},
mutations
:
{
...
...
@@ -15,6 +17,15 @@ const app = {
Cookies
.
set
(
'
sidebarStatus
'
,
0
)
}
state
.
sidebar
.
opened
=
!
state
.
sidebar
.
opened
state
.
sidebar
.
withoutAnimation
=
false
},
CLOSE_SIDEBAR
:
(
state
,
withoutAnimation
)
=>
{
Cookies
.
set
(
'
sidebarStatus
'
,
1
)
state
.
sidebar
.
opened
=
false
state
.
sidebar
.
withoutAnimation
=
withoutAnimation
},
TOGGLE_DEVICE
:
(
state
,
device
)
=>
{
state
.
device
=
device
},
SET_LANGUAGE
:
(
state
,
language
)
=>
{
state
.
language
=
language
...
...
@@ -25,6 +36,12 @@ const app = {
toggleSideBar
({
commit
})
{
commit
(
'
TOGGLE_SIDEBAR
'
)
},
closeSideBar
({
commit
},
{
withoutAnimation
})
{
commit
(
'
CLOSE_SIDEBAR
'
,
withoutAnimation
)
},
toggleDevice
({
commit
},
device
)
{
commit
(
'
TOGGLE_DEVICE
'
,
device
)
},
setLanguage
({
commit
},
language
)
{
commit
(
'
SET_LANGUAGE
'
,
language
)
}
...
...
src/styles/sidebar.scss
浏览文件 @
0e4ea087
#app
{
// 主体区域
.main-container
{
min-height
:
100%
;
transition
:
margin-left
.28s
;
margin-left
:
180px
;
}
// 侧边栏
// 侧边栏
.sidebar-container
{
.horizontal-collapse-transition
{
transition
:
0s
width
ease-in-out
,
0s
padding-left
ease-in-out
,
0s
padding-right
ease-in-out
;
...
...
@@ -32,6 +34,7 @@
width
:
100%
!
important
;
}
}
.hideSidebar
{
.sidebar-container
{
width
:
36px
!
important
;
...
...
@@ -62,7 +65,8 @@
}
}
}
.sidebar-container
.nest-menu
.el-submenu
>
.el-submenu__title
,
.sidebar-container
.nest-menu
.el-submenu
>
.el-submenu__title
,
.sidebar-container
.el-submenu
.el-menu-item
{
min-width
:
180px
!
important
;
background-color
:
$subMenuBg
!
important
;
...
...
@@ -73,4 +77,29 @@
.el-menu--collapse
.el-menu
.el-submenu
{
min-width
:
180px
!
important
;
}
//适配移动端
.mobile
{
.main-container
{
margin-left
:
0px
;
}
.sidebar-container
{
top
:
50px
;
transition
:
transform
.28s
;
width
:
180px
!
important
;
}
&
.hideSidebar
{
.sidebar-container
{
transition-duration
:
0
.3s
;
transform
:
translate3d
(
-180px
,
0
,
0
);
}
}
}
.withoutAnimation
{
.main-container
,
.sidebar-container
{
transition
:
none
;
}
}
}
src/views/layout/Layout.vue
浏览文件 @
0e4ea087
<
template
>
<div
class=
"app-wrapper"
:class=
"
{hideSidebar:!sidebar.opened}
">
<div
class=
"app-wrapper"
:class=
"
classObj
"
>
<sidebar
class=
"sidebar-container"
></sidebar>
<div
class=
"main-container"
>
<navbar></navbar>
...
...
@@ -11,6 +11,7 @@
<
script
>
import
{
Navbar
,
Sidebar
,
AppMain
,
TagsView
}
from
'
./components
'
import
ResizeMixin
from
'
./mixin/ResizeHandler
'
export
default
{
name
:
'
layout
'
,
...
...
@@ -20,9 +21,20 @@ export default {
AppMain
,
TagsView
},
mixins
:
[
ResizeMixin
],
computed
:
{
sidebar
()
{
return
this
.
$store
.
state
.
app
.
sidebar
},
device
()
{
return
this
.
$store
.
state
.
app
.
device
},
classObj
()
{
return
{
hideSidebar
:
!
this
.
sidebar
.
opened
,
withoutAnimation
:
this
.
sidebar
.
withoutAnimation
,
mobile
:
this
.
device
===
'
mobile
'
}
}
}
}
...
...
src/views/layout/mixin/ResizeHandler.js
0 → 100644
浏览文件 @
0e4ea087
import
store
from
'
@/store
'
const
{
body
}
=
document
const
WIDTH
=
1024
const
RATIO
=
3
export
default
{
watch
:
{
$route
(
route
)
{
if
(
this
.
device
===
'
mobile
'
&&
this
.
sidebar
.
opened
)
{
store
.
dispatch
(
'
closeSideBar
'
,
{
withoutAnimation
:
false
})
}
}
},
beforeMount
()
{
window
.
addEventListener
(
'
resize
'
,
this
.
resizeHandler
)
},
mounted
()
{
const
isMobile
=
this
.
isMobile
()
if
(
isMobile
)
{
store
.
dispatch
(
'
toggleDevice
'
,
'
mobile
'
)
store
.
dispatch
(
'
closeSideBar
'
,
{
withoutAnimation
:
true
})
}
},
methods
:
{
isMobile
()
{
const
rect
=
body
.
getBoundingClientRect
()
return
rect
.
width
-
RATIO
<
WIDTH
},
resizeHandler
()
{
if
(
!
document
.
hidden
)
{
const
isMobile
=
this
.
isMobile
()
store
.
dispatch
(
'
toggleDevice
'
,
isMobile
?
'
mobile
'
:
'
desktop
'
)
if
(
isMobile
)
{
store
.
dispatch
(
'
closeSideBar
'
,
{
withoutAnimation
:
true
})
}
}
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录