Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
dyingstraw
vue-element-admin
提交
68de01e8
V
vue-element-admin
项目概览
dyingstraw
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
3
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,发现更多精彩内容 >>
未验证
提交
68de01e8
编写于
8月 31, 2018
作者:
花
花裤衩
提交者:
GitHub
8月 31, 2018
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor[tagsView]: use el-scrollbar (#995)
上级
6e569c4f
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
28 addition
and
40 deletion
+28
-40
src/components/ScrollPane/index.vue
src/components/ScrollPane/index.vue
+20
-36
src/views/layout/components/TagsView.vue
src/views/layout/components/TagsView.vue
+8
-4
未找到文件。
src/components/ScrollPane/index.vue
浏览文件 @
68de01e8
<
template
>
<div
ref=
"scrollContainer"
class=
"scroll-container"
@
wheel.prevent=
"handleScroll"
>
<div
ref=
"scrollWrapper"
:style=
"
{left: left + 'px'}" class="scroll-wrapper">
<slot/>
</div>
</div>
<el-scrollbar
ref=
"scrollContainer"
:vertical=
"false"
class=
"scroll-container"
@
wheel.native.prevent=
"handleScroll"
>
<slot/>
</el-scrollbar>
</
template
>
<
script
>
...
...
@@ -18,41 +16,22 @@ export default {
},
methods
:
{
handleScroll
(
e
)
{
const
eventDelta
=
e
.
wheelDelta
||
-
e
.
deltaY
*
3
const
$container
=
this
.
$refs
.
scrollContainer
const
$containerWidth
=
$container
.
offsetWidth
const
$wrapper
=
this
.
$refs
.
scrollWrapper
const
$wrapperWidth
=
$wrapper
.
offsetWidth
if
(
eventDelta
>
0
)
{
this
.
left
=
Math
.
min
(
0
,
this
.
left
+
eventDelta
)
}
else
{
if
(
$containerWidth
-
padding
<
$wrapperWidth
)
{
if
(
this
.
left
<
-
(
$wrapperWidth
-
$containerWidth
+
padding
))
{
this
.
left
=
this
.
left
}
else
{
this
.
left
=
Math
.
max
(
this
.
left
+
eventDelta
,
$containerWidth
-
$wrapperWidth
-
padding
)
}
}
else
{
this
.
left
=
0
}
}
const
eventDelta
=
e
.
wheelDelta
||
-
e
.
deltaY
*
40
const
$scrollWrapper
=
this
.
$refs
.
scrollContainer
.
$refs
.
wrap
$scrollWrapper
.
scrollLeft
=
$scrollWrapper
.
scrollLeft
+
eventDelta
/
4
},
moveToTarget
(
$target
)
{
const
$container
=
this
.
$refs
.
scrollContainer
const
$container
=
this
.
$refs
.
scrollContainer
.
$el
const
$containerWidth
=
$container
.
offsetWidth
const
$scrollWrapper
=
this
.
$refs
.
scrollContainer
.
$refs
.
wrap
const
$targetLeft
=
$target
.
offsetLeft
const
$targetWidth
=
$target
.
offsetWidth
if
(
$targetLeft
<
-
this
.
left
)
{
// tag in the left
this
.
left
=
-
$targetLeft
+
padding
}
else
if
(
$targetLeft
+
padding
>
-
this
.
left
&&
$targetLeft
+
$targetWidth
<
-
this
.
left
+
$containerWidth
-
padding
)
{
// tag in the current view
// eslint-disable-line
}
else
{
if
(
$targetLeft
>
$containerWidth
)
{
// tag in the right
this
.
left
=
-
(
$targetLeft
-
(
$containerWidth
-
$targetWidth
)
+
padding
)
$scrollWrapper
.
scrollLeft
=
$targetLeft
-
$containerWidth
+
$targetWidth
+
padding
}
else
{
// tag in the left
$scrollWrapper
.
scrollLeft
=
$targetLeft
-
padding
}
}
}
...
...
@@ -65,8 +44,13 @@ export default {
position
:
relative
;
overflow
:
hidden
;
width
:
100%
;
.scroll-wrapper
{
position
:
absolute
;
/
deep
/
{
.el-scrollbar__bar
{
bottom
:
0px
;
}
.el-scrollbar__wrap
{
height
:
49px
;
}
}
}
</
style
>
src/views/layout/components/TagsView.vue
浏览文件 @
68de01e8
...
...
@@ -123,11 +123,12 @@ export default {
<
style
rel=
"stylesheet/scss"
lang=
"scss"
scoped
>
.tags-view-container
{
height
:
34px
;
width
:
100%
;
background
:
#fff
;
border-bottom
:
1px
solid
#d8dce5
;
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.12
)
,
0
0
3px
0
rgba
(
0
,
0
,
0
,
.04
);
.tags-view-wrapper
{
background
:
#fff
;
height
:
34px
;
border-bottom
:
1px
solid
#d8dce5
;
box-shadow
:
0
1px
3px
0
rgba
(
0
,
0
,
0
,
.12
)
,
0
0
3px
0
rgba
(
0
,
0
,
0
,
.04
);
.tags-view-item
{
display
:
inline-block
;
position
:
relative
;
...
...
@@ -143,6 +144,9 @@ export default {
&
:first-of-type
{
margin-left
:
15px
;
}
&
:last-of-type
{
margin-right
:
15px
;
}
&
.active
{
background-color
:
#42b983
;
color
:
#fff
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录