Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
5069a4d1
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,发现更多精彩内容 >>
提交
5069a4d1
编写于
7月 17, 2017
作者:
D
dongsuo
提交者:
花裤衩
7月 17, 2017
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'修改返回顶部功能'
上级
bf087566
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
64 addition
and
30 deletion
+64
-30
src/components/BackToTop/index.vue
src/components/BackToTop/index.vue
+42
-23
src/views/components/backToTop.vue
src/views/components/backToTop.vue
+22
-7
未找到文件。
src/components/BackToTop/index.vue
浏览文件 @
5069a4d1
<
template
>
<transition
name=
"fade"
>
<div
class=
"back-to-top"
@
click=
"backToTop"
v-show=
"visible"
>
<el-tooltip
class=
"item"
effect=
"dark"
content=
"返回顶部"
placement=
"top"
>
<i
class=
"el-icon-arrow-up"
></i>
</el-tooltip>
<transition
:name=
"transitionName"
>
<div
class=
"back-to-top"
@
click=
"backToTop"
v-show=
"visible"
:style=
"customStyle"
>
<svg
width=
"16"
height=
"16"
viewBox=
"0 0 17 17"
xmlns=
"http://www.w3.org/2000/svg"
class=
"Icon Icon--backToTopArrow"
aria-hidden=
"true"
style=
"height: 16px; width: 16px;"
>
<title>
回到顶部
</title>
<g>
<path
d=
"M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"
fill-rule=
"evenodd"
></path>
</g>
</svg>
</div>
</transition>
</
template
>
...
...
@@ -18,18 +21,39 @@ export default {
backPosition
:
{
type
:
Number
,
default
:
0
},
customStyle
:
{
type
:
Object
,
default
:
{
right
:
'
50px
'
,
bottom
:
'
50px
'
,
width
:
'
40px
'
,
height
:
'
40px
'
,
'
border-radius
'
:
'
4px
'
,
'
line-height
'
:
'
40px
'
,
background
:
'
#e7eaf1
'
}
},
transitionName
:
{
type
:
String
,
default
:
'
fade
'
}
},
data
()
{
return
{
visible
:
false
visible
:
false
,
interval
:
null
}
},
mounted
()
{
window
.
addEventListener
(
'
scroll
'
,
this
.
handleScroll
)
window
.
addEventListener
(
'
scroll
'
,
this
.
handleScroll
)
;
},
beforeDestroy
()
{
window
.
removeEventListener
(
'
scroll
'
,
this
.
handleScroll
)
window
.
removeEventListener
(
'
scroll
'
,
this
.
handleScroll
);
if
(
this
.
interval
)
{
clearInterval
(
this
.
interval
);
}
},
methods
:
{
handleScroll
()
{
...
...
@@ -38,11 +62,11 @@ export default {
backToTop
()
{
const
start
=
window
.
pageYOffset
;
let
i
=
0
;
const
t
=
setInterval
(()
=>
{
this
.
interval
=
setInterval
(()
=>
{
const
next
=
Math
.
floor
(
this
.
easeInOutQuad
(
10
*
i
,
start
,
-
start
,
500
));
if
(
next
<=
this
.
backPosition
)
{
window
.
scrollTo
(
0
,
this
.
backPosition
);
clearInterval
(
t
)
clearInterval
(
t
his
.
interval
)
}
else
{
window
.
scrollTo
(
0
,
next
);
}
...
...
@@ -59,21 +83,18 @@ export default {
<
style
scoped
>
.back-to-top
{
position
:
fixed
;
right
:
50px
;
bottom
:
50px
;
display
:
inline-block
;
height
:
40px
;
width
:
40px
;
box-shadow
:
1px
1px
1px
#58B7FF
;
text-align
:
center
;
cursor
:
pointer
;
background
:
#58B7FF
;
color
:
#fff
;
}
.back-to-top
:hover
{
background
:
#d5dbe7
;
}
.fade-enter-active
,
.fade-leave-active
{
transition
:
opacity
1s
transition
:
opacity
.5s
;
}
.fade-enter
,
...
...
@@ -81,11 +102,9 @@ export default {
opacity
:
0
}
.back-to-top
i
{
display
:
inline-block
;
width
:
100%
;
height
:
100%
;
line-height
:
40px
;
.back-to-top
.Icon
{
fill
:
#9aaabf
;
background
:
none
;
}
</
style
>
...
...
src/views/components/backToTop.vue
浏览文件 @
5069a4d1
<
template
>
<div
class=
"components-container"
>
<code>
页面滚动到指定位置会在右下角出现返回顶部按钮
</code>
<code>
可自定义按钮的样式、show/hide临界点、返回的位置
如需文字提示,可在外部使用Element的el-tooltip元素
</code>
<div>
我是占位
</div>
<div>
我是占位
</div>
<div>
我是占位
</div>
...
...
@@ -125,19 +127,32 @@
<div>
我是占位
</div>
<div>
我是占位
</div>
<div>
我是占位
</div>
<back-to-top
id=
"back-to-top-t"
:visibilityHeight=
"300"
:backPosition=
"50"
></back-to-top>
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
<!--如需文字提示,可在外部添加element的
<el-tooltip></el-tooltip>
元素 -->
<el-tooltip
placement=
"top"
content=
"文字提示"
>
<back-to-top
transitionName=
"fade"
:customStyle=
"myBackToTopStyle"
:visibilityHeight=
"300"
:backPosition=
"50"
></back-to-top>
</el-tooltip>
</div>
</
template
>
<
script
>
import
BackToTop
from
'
components/BackToTop
'
;
export
default
{
components
:
{
BackToTop
}
components
:
{
BackToTop
},
data
()
{
return
{
myBackToTopStyle
:
{
right
:
'
50px
'
,
bottom
:
'
50px
'
,
width
:
'
40px
'
,
height
:
'
40px
'
,
'
border-radius
'
:
'
4px
'
,
'
line-height
'
:
'
40px
'
,
// 请保持与高度一致以垂直居中
background
:
'
#e7eaf1
'
// 按钮的背景颜色
}
}
}
}
</
script
>
<
style
scoped
>
#back-to-top-t
{
right
:
100px
;
bottom
:
100px
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录