Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
d5683167
V
vue-element-admin
项目概览
圆滚滚核心
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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,发现更多精彩内容 >>
提交
d5683167
编写于
10月 31, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
style:refine tabsview css
上级
2c868f47
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
79 addition
and
16 deletion
+79
-16
src/components/GithubCorner/index.vue
src/components/GithubCorner/index.vue
+1
-1
src/components/ScrollPane/index.vue
src/components/ScrollPane/index.vue
+51
-0
src/styles/index.scss
src/styles/index.scss
+6
-0
src/views/dashboard/admin/index.vue
src/views/dashboard/admin/index.vue
+2
-2
src/views/layout/components/TabsView.vue
src/views/layout/components/TabsView.vue
+19
-13
未找到文件。
src/components/GithubCorner/index.vue
浏览文件 @
d5683167
<
template
>
<a
href=
"https://github.com/PanJiaChen/vue-element-admin"
target=
"_blank"
class=
"github-corner"
aria-label=
"View source on Github"
>
<svg
width=
"80"
height=
"80"
viewBox=
"0 0 250 250"
style=
"fill:#4AB7BD; color:#fff; position: absolute; top:
50
px; border: 0; right: 0;"
<svg
width=
"80"
height=
"80"
viewBox=
"0 0 250 250"
style=
"fill:#4AB7BD; color:#fff; position: absolute; top:
84
px; border: 0; right: 0;"
aria-hidden=
"true"
>
<path
d=
"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
></path>
<path
d=
"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
...
...
src/components/ScrollPane/index.vue
0 → 100644
浏览文件 @
d5683167
<
template
>
<div
class=
'scroll-container'
ref=
'scrollContainer'
@
mousewheel=
"handleScroll"
>
<div
class=
'scroll-wrapper'
ref=
'scrollWrapper'
:style=
"
{left: left + 'px'}">
<slot></slot>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'
scrollPane
'
,
data
()
{
return
{
left
:
0
}
},
methods
:
{
handleScroll
(
e
)
{
e
.
preventDefault
()
const
$container
=
this
.
$refs
.
scrollContainer
const
$containerWidth
=
$container
.
offsetWidth
const
$wrapper
=
this
.
$refs
.
scrollWrapper
const
$wrapperWidth
=
$wrapper
.
offsetWidth
console
.
log
(
$containerWidth
,
$wrapperWidth
)
if
(
e
.
wheelDelta
>
0
)
{
this
.
left
=
Math
.
min
(
0
,
this
.
left
+
e
.
wheelDelta
)
}
else
{
if
(
$containerWidth
-
100
<
$wrapperWidth
)
{
if
(
this
.
left
<
-
(
$wrapperWidth
-
$containerWidth
+
100
))
{
this
.
left
=
this
.
left
}
else
{
this
.
left
=
Math
.
max
(
this
.
left
+
e
.
wheelDelta
,
$containerWidth
-
$wrapperWidth
-
100
)
}
}
else
{
this
.
left
=
0
}
}
}
}
}
</
script
>
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.scroll-container
{
white-space
:
nowrap
;
position
:
relative
;
.scroll-wrapper
{
position
:
absolute
;
}
}
</
style
>
src/styles/index.scss
浏览文件 @
d5683167
...
...
@@ -4,6 +4,7 @@
@import
'./sidebar.scss'
;
body
{
height
:
100%
;
-moz-osx-font-smoothing
:
grayscale
;
-webkit-font-smoothing
:
antialiased
;
text-rendering
:
optimizeLegibility
;
...
...
@@ -15,9 +16,14 @@ label {
}
html
{
height
:
100%
;
box-sizing
:
border-box
;
}
#app
{
height
:
100%
;
}
*,
*
:before
,
*
:after
{
...
...
src/views/dashboard/admin/index.vue
浏览文件 @
d5683167
...
...
@@ -12,10 +12,10 @@
<router-link
class=
"pan-btn pink-btn"
to=
"/excel/download"
>
Excel
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<router-link
class=
"pan-btn green-btn"
to=
"/example/table/table"
>
Table
</router-link>
<router-link
class=
"pan-btn green-btn"
to=
"/example/table/
complex-
table"
>
Table
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<router-link
class=
"pan-btn tiffany-btn"
to=
"/
example/form/edit
"
>
Form
</router-link>
<router-link
class=
"pan-btn tiffany-btn"
to=
"/
form/edit-form
"
>
Form
</router-link>
</el-col>
<el-col
:span=
"4"
class=
'text-center'
>
<router-link
class=
"pan-btn yellow-btn"
to=
"/theme/index"
>
Theme
</router-link>
...
...
src/views/layout/components/TabsView.vue
浏览文件 @
d5683167
<
template
>
<div
class=
'tabs-view-container'
>
<router-link
class=
"tabs-view-item"
:class=
"isActive(tag.path)?'active':''"
v-for=
"tag in Array.from(visitedViews)"
:to=
"tag.path"
:key=
"tag.path"
>
{{
tag
.
name
}}
<span
class=
'el-icon-close'
@
click=
'closeViewTabs(tag,$event)'
></span>
<scroll-pane
class=
'tabs-view-container'
>
<router-link
class=
"tabs-view-item"
:class=
"isActive(tag.path)?'active':''"
v-for=
"tag in Array.from(visitedViews)"
:to=
"tag.path"
:key=
"tag.path"
>
{{
tag
.
name
}}
<span
class=
'el-icon-close'
@
click=
'closeViewTabs(tag,$event)'
></span>
</router-link>
</
div
>
</
scroll-pane
>
</
template
>
<
script
>
import
ScrollPane
from
'
@/components/ScrollPane
'
export
default
{
components
:
{
ScrollPane
},
computed
:
{
visitedViews
()
{
return
this
.
$store
.
state
.
app
.
visitedViews
...
...
@@ -44,6 +49,7 @@ export default {
isActive
(
path
)
{
return
path
===
this
.
$route
.
path
}
},
watch
:
{
$route
()
{
...
...
@@ -57,25 +63,25 @@ export default {
.tabs-view-container
{
background
:
#fff
;
height
:
34px
;
line-height
:
34px
;
border-bottom
:
1px
solid
#d8dce5
;
box-shadow
:
0
2px
4px
0
rgba
(
0
,
0
,
0
,
.12
)
,
0
0
6
px
0
rgba
(
0
,
0
,
0
,
.04
);
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.12
)
,
0
0
3
px
0
rgba
(
0
,
0
,
0
,
.04
);
.tabs-view-item
{
display
:
inline-block
;
position
:
relative
;
height
:
32
px
;
line-height
:
32
px
;
height
:
26
px
;
line-height
:
26
px
;
border
:
1px
solid
#d8dce5
;
color
:
#495060
;
background
:
#fff
;
padding
:
0
12
px
;
padding
:
0
8
px
;
font-size
:
12px
;
margin-left
:
10px
;
margin-left
:
5px
;
margin-top
:
4px
;
&
:first-of-type
{
margin-left
:
0
px
;
margin-left
:
15
px
;
}
&
.active
{
b
order-bottom
:
0px
;
b
ackground-color
:
#eef1f6
;
&
::before
{
content
:
''
;
background
:
#20a0ff
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录