Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
圆滚滚核心
vue-element-admin
提交
cbc5c182
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,发现更多精彩内容 >>
提交
cbc5c182
编写于
7月 17, 2017
作者:
D
dongsuo
提交者:
花裤衩
7月 17, 2017
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
'代码格式化'
上级
5069a4d1
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
101 addition
and
105 deletion
+101
-105
src/components/BackToTop/index.vue
src/components/BackToTop/index.vue
+83
-84
src/views/components/backToTop.vue
src/views/components/backToTop.vue
+18
-21
未找到文件。
src/components/BackToTop/index.vue
浏览文件 @
cbc5c182
...
...
@@ -10,8 +10,9 @@
</div>
</transition>
</
template
>
<
script
>
export
default
{
export
default
{
name
:
'
BackToTop
'
,
props
:
{
visibilityHeight
:
{
...
...
@@ -30,7 +31,7 @@ export default {
width
:
'
40px
'
,
height
:
'
40px
'
,
'
border-radius
'
:
'
4px
'
,
'
line-height
'
:
'
40
px
'
,
'
line-height
'
:
'
45
px
'
,
background
:
'
#e7eaf1
'
}
},
...
...
@@ -38,7 +39,6 @@ export default {
type
:
String
,
default
:
'
fade
'
}
},
data
()
{
return
{
...
...
@@ -78,34 +78,33 @@ export default {
return
-
c
/
2
*
(
--
t
*
(
t
-
2
)
-
1
)
+
b
;
}
}
}
}
</
script
>
<
style
scoped
>
.back-to-top
{
.back-to-top
{
position
:
fixed
;
display
:
inline-block
;
text-align
:
center
;
cursor
:
pointer
;
}
}
.back-to-top
:hover
{
.back-to-top
:hover
{
background
:
#d5dbe7
;
}
}
.fade-enter-active
,
.fade-leave-active
{
.fade-enter-active
,
.fade-leave-active
{
transition
:
opacity
.5s
;
}
}
.fade-enter
,
.fade-leave-to
{
.fade-enter
,
.fade-leave-to
{
opacity
:
0
}
}
.back-to-top
.Icon
{
.back-to-top
.Icon
{
fill
:
#9aaabf
;
background
:
none
;
}
}
</
style
>
src/views/components/backToTop.vue
浏览文件 @
cbc5c182
<
template
>
<div
class=
"components-container"
>
<code>
页面滚动到指定位置会在右下角出现返回顶部按钮
</code>
<code>
可自定义按钮的样式、show/hide临界点、返回的位置
如需文字提示,可在外部使用Element的el-tooltip元素
</code>
<code>
可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示,可在外部使用Element的el-tooltip元素
</code>
<div>
我是占位
</div>
<div>
我是占位
</div>
<div>
我是占位
</div>
...
...
@@ -134,9 +133,10 @@
</el-tooltip>
</div>
</
template
>
<
script
>
import
BackToTop
from
'
components/BackToTop
'
;
export
default
{
import
BackToTop
from
'
components/BackToTop
'
;
export
default
{
components
:
{
BackToTop
},
data
()
{
return
{
...
...
@@ -146,13 +146,10 @@ export default {
width
:
'
40px
'
,
height
:
'
40px
'
,
'
border-radius
'
:
'
4px
'
,
'
line-height
'
:
'
40
px
'
,
// 请保持与高度一致以垂直居中
'
line-height
'
:
'
45
px
'
,
// 请保持与高度一致以垂直居中
background
:
'
#e7eaf1
'
// 按钮的背景颜色
}
}
}
}
</
script
>
<
style
scoped
>
</
style
>
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录