forked from AkkomaGang/admin-fe
'代码格式化'
This commit is contained in:
parent
5069a4d1df
commit
cbc5c18291
2 changed files with 102 additions and 106 deletions
|
@ -10,102 +10,101 @@
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'BackToTop',
|
name: 'BackToTop',
|
||||||
props: {
|
props: {
|
||||||
visibilityHeight: {
|
visibilityHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 400
|
default: 400
|
||||||
},
|
},
|
||||||
backPosition: {
|
backPosition: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
customStyle: {
|
customStyle: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {
|
default: {
|
||||||
right: '50px',
|
right: '50px',
|
||||||
bottom: '50px',
|
bottom: '50px',
|
||||||
width: '40px',
|
width: '40px',
|
||||||
height: '40px',
|
height: '40px',
|
||||||
'border-radius': '4px',
|
'border-radius': '4px',
|
||||||
'line-height': '40px',
|
'line-height': '45px',
|
||||||
background: '#e7eaf1'
|
background: '#e7eaf1'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transitionName: {
|
||||||
|
type: String,
|
||||||
|
default: 'fade'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
transitionName: {
|
data() {
|
||||||
type: String,
|
return {
|
||||||
default: 'fade'
|
visible: false,
|
||||||
}
|
interval: null
|
||||||
|
}
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
visible: false,
|
|
||||||
interval: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.addEventListener('scroll', this.handleScroll);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
window.removeEventListener('scroll', this.handleScroll);
|
|
||||||
if (this.interval) {
|
|
||||||
clearInterval(this.interval);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleScroll() {
|
|
||||||
this.visible = window.pageYOffset > this.visibilityHeight;
|
|
||||||
},
|
},
|
||||||
backToTop() {
|
mounted() {
|
||||||
const start = window.pageYOffset;
|
window.addEventListener('scroll', this.handleScroll);
|
||||||
let i = 0;
|
|
||||||
this.interval = setInterval(() => {
|
|
||||||
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
|
|
||||||
if (next <= this.backPosition) {
|
|
||||||
window.scrollTo(0, this.backPosition);
|
|
||||||
clearInterval(this.interval)
|
|
||||||
} else {
|
|
||||||
window.scrollTo(0, next);
|
|
||||||
}
|
|
||||||
i++;
|
|
||||||
}, 16.7)
|
|
||||||
},
|
},
|
||||||
easeInOutQuad(t, b, c, d) {
|
beforeDestroy() {
|
||||||
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
|
window.removeEventListener('scroll', this.handleScroll);
|
||||||
return -c / 2 * (--t * (t - 2) - 1) + b;
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleScroll() {
|
||||||
|
this.visible = window.pageYOffset > this.visibilityHeight;
|
||||||
|
},
|
||||||
|
backToTop() {
|
||||||
|
const start = window.pageYOffset;
|
||||||
|
let i = 0;
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
|
||||||
|
if (next <= this.backPosition) {
|
||||||
|
window.scrollTo(0, this.backPosition);
|
||||||
|
clearInterval(this.interval)
|
||||||
|
} else {
|
||||||
|
window.scrollTo(0, next);
|
||||||
|
}
|
||||||
|
i++;
|
||||||
|
}, 16.7)
|
||||||
|
},
|
||||||
|
easeInOutQuad(t, b, c, d) {
|
||||||
|
if ((t /= d / 2) < 1) return c / 2 * t * t + 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>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
<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>
|
||||||
|
@ -130,29 +129,27 @@
|
||||||
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
|
<!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
|
||||||
<!--如需文字提示,可在外部添加element的<el-tooltip></el-tooltip>元素 -->
|
<!--如需文字提示,可在外部添加element的<el-tooltip></el-tooltip>元素 -->
|
||||||
<el-tooltip placement="top" content="文字提示">
|
<el-tooltip placement="top" content="文字提示">
|
||||||
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
|
<back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
|
||||||
</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 {
|
||||||
myBackToTopStyle: {
|
myBackToTopStyle: {
|
||||||
right: '50px',
|
right: '50px',
|
||||||
bottom: '50px',
|
bottom: '50px',
|
||||||
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>
|
|
||||||
|
|
Loading…
Reference in a new issue