From cbc5c18291098575d603a96b7b802bdede9e9bfd Mon Sep 17 00:00:00 2001 From: dongsuo <xuxiaofei1.0@outlook.com> Date: Mon, 17 Jul 2017 18:00:28 +0800 Subject: [PATCH] =?UTF-8?q?'=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=8C=96'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BackToTop/index.vue | 169 ++++++++++++++--------------- src/views/components/backToTop.vue | 39 +++---- 2 files changed, 102 insertions(+), 106 deletions(-) diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue index 12cda74f..2c8826ba 100644 --- a/src/components/BackToTop/index.vue +++ b/src/components/BackToTop/index.vue @@ -10,102 +10,101 @@ </div> </transition> </template> + <script> -export default { - name: 'BackToTop', - props: { - visibilityHeight: { - type: Number, - default: 400 - }, - 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' + export default { + name: 'BackToTop', + props: { + visibilityHeight: { + type: Number, + default: 400 + }, + backPosition: { + type: Number, + default: 0 + }, + customStyle: { + type: Object, + default: { + right: '50px', + bottom: '50px', + width: '40px', + height: '40px', + 'border-radius': '4px', + 'line-height': '45px', + background: '#e7eaf1' + } + }, + transitionName: { + type: String, + default: 'fade' } }, - transitionName: { - type: String, - default: 'fade' - } - - }, - 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; + data() { + return { + visible: false, + interval: null + } }, - 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) + mounted() { + window.addEventListener('scroll', this.handleScroll); }, - easeInOutQuad(t, b, c, d) { - if ((t /= d / 2) < 1) return c / 2 * t * t + b; - return -c / 2 * (--t * (t - 2) - 1) + b; + beforeDestroy() { + window.removeEventListener('scroll', this.handleScroll); + 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> + <style scoped> -.back-to-top { - position: fixed; - display: inline-block; - text-align: center; - cursor: pointer; -} + .back-to-top { + position: fixed; + display: inline-block; + text-align: center; + cursor: pointer; + } -.back-to-top:hover { - background: #d5dbe7; -} + .back-to-top:hover { + background: #d5dbe7; + } -.fade-enter-active, -.fade-leave-active { - transition: opacity .5s; -} + .fade-enter-active, + .fade-leave-active { + transition: opacity .5s; + } -.fade-enter, -.fade-leave-to { - opacity: 0 -} + .fade-enter, + .fade-leave-to { + opacity: 0 + } -.back-to-top .Icon { - fill: #9aaabf; - background: none; -} + .back-to-top .Icon { + fill: #9aaabf; + background: none; + } </style> - - diff --git a/src/views/components/backToTop.vue b/src/views/components/backToTop.vue index ecf39575..df681b7d 100644 --- a/src/views/components/backToTop.vue +++ b/src/views/components/backToTop.vue @@ -1,8 +1,7 @@ <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> @@ -130,29 +129,27 @@ <!--可自定义按钮的样式、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> + <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 }, - data() { - return { - myBackToTopStyle: { - right: '50px', - bottom: '50px', - width: '40px', - height: '40px', - 'border-radius': '4px', - 'line-height': '40px', // 请保持与高度一致以垂直居中 - background: '#e7eaf1'// 按钮的背景颜色 + import BackToTop from 'components/BackToTop'; + export default { + components: { BackToTop }, + data() { + return { + myBackToTopStyle: { + right: '50px', + bottom: '50px', + width: '40px', + height: '40px', + 'border-radius': '4px', + 'line-height': '45px', // 请保持与高度一致以垂直居中 + background: '#e7eaf1'// 按钮的背景颜色 + } } } } -} -</script> -<style scoped> - -</style> + </script>