Commit cbc5c182 authored by dongsuo's avatar dongsuo Committed by 花裤衩

'代码格式化'

parent 5069a4d1
...@@ -10,8 +10,9 @@ ...@@ -10,8 +10,9 @@
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
export default { export default {
name: 'BackToTop', name: 'BackToTop',
props: { props: {
visibilityHeight: { visibilityHeight: {
...@@ -30,7 +31,7 @@ export default { ...@@ -30,7 +31,7 @@ export default {
width: '40px', width: '40px',
height: '40px', height: '40px',
'border-radius': '4px', 'border-radius': '4px',
'line-height': '40px', 'line-height': '45px',
background: '#e7eaf1' background: '#e7eaf1'
} }
}, },
...@@ -38,7 +39,6 @@ export default { ...@@ -38,7 +39,6 @@ export default {
type: String, type: String,
default: 'fade' default: 'fade'
} }
}, },
data() { data() {
return { return {
...@@ -78,34 +78,33 @@ export default { ...@@ -78,34 +78,33 @@ export default {
return -c / 2 * (--t * (t - 2) - 1) + b; return -c / 2 * (--t * (t - 2) - 1) + b;
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.back-to-top { .back-to-top {
position: fixed; position: fixed;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.back-to-top:hover { .back-to-top:hover {
background: #d5dbe7; background: #d5dbe7;
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity .5s; transition: opacity .5s;
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0 opacity: 0
} }
.back-to-top .Icon { .back-to-top .Icon {
fill: #9aaabf; fill: #9aaabf;
background: none; background: none;
} }
</style> </style>
<template> <template>
<div class="components-container"> <div class="components-container">
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code> <code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
<code>可自定义按钮的样式、show/hide临界点、返回的位置 <code>可自定义按钮的样式、show/hide临界点、返回的位置 如需文字提示,可在外部使用Element的el-tooltip元素 </code>
如需文字提示,可在外部使用Element的el-tooltip元素 </code>
<div>我是占位</div> <div>我是占位</div>
<div>我是占位</div> <div>我是占位</div>
<div>我是占位</div> <div>我是占位</div>
...@@ -134,9 +133,10 @@ ...@@ -134,9 +133,10 @@
</el-tooltip> </el-tooltip>
</div> </div>
</template> </template>
<script> <script>
import BackToTop from 'components/BackToTop'; import BackToTop from 'components/BackToTop';
export default { export default {
components: { BackToTop }, components: { BackToTop },
data() { data() {
return { return {
...@@ -146,13 +146,10 @@ export default { ...@@ -146,13 +146,10 @@ export default {
width: '40px', width: '40px',
height: '40px', height: '40px',
'border-radius': '4px', 'border-radius': '4px',
'line-height': '40px', // 请保持与高度一致以垂直居中 'line-height': '45px', // 请保持与高度一致以垂直居中
background: '#e7eaf1'// 按钮的背景颜色 background: '#e7eaf1'// 按钮的背景颜色
} }
} }
} }
} }
</script> </script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment