interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

'代码格式化'

Browse source
This commit is contained in:
dongsuo 2017-07-17 18:00:28 +08:00 committed by 花裤衩
parent 5069a4d1df
commit cbc5c18291
2 changed files with 102 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
src/components/BackToTop/index.vue
View file

@ -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>

39
src/views/components/backToTop.vue
View file

@ -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>