mirror of https://github.com/ElemeFE/element
Doc: add back-to-top icon in components page (#3279)
杨奕
cinwell.li
parent
cdc482c0c4
commit
d0ce16a8a1
|
|
@ -2,8 +2,6 @@
|
|||
.page-component {
|
||||
padding-bottom: 95px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.page-component {
|
||||
.content {
|
||||
margin-left: -1px;
|
||||
|
||||
|
|
@ -39,6 +37,32 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.page-component-up {
|
||||
background-color: #58b7ff;
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 150px;
|
||||
size: 50px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
transition: .3s;
|
||||
i {
|
||||
color: #fff;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
}
|
||||
&.hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.back-top-fade-enter,
|
||||
.back-top-fade-leave-active {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
|
|
@ -52,16 +76,48 @@
|
|||
<footer-nav></footer-nav>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<transition name="back-top-fade">
|
||||
<div
|
||||
class="page-component-up"
|
||||
:class="{ 'hover': hover }"
|
||||
v-show="showBackToTop"
|
||||
@mouseenter="hover = true"
|
||||
@mouseleave="hover = false"
|
||||
@click="toTop">
|
||||
<i class="el-icon-caret-top"></i>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import navsData from '../../nav.config.json';
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: this.$route.meta.lang,
|
||||
navsData
|
||||
navsData,
|
||||
hover: false,
|
||||
showBackToTop: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toTop() {
|
||||
this.hover = false;
|
||||
this.showBackToTop = false;
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
},
|
||||
handleScroll() {
|
||||
this.showBackToTop = (document.body.scrollTop || document.documentElement.scrollTop) >= 0.5 * document.body.clientHeight;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.throttledScrollHandler = throttle(300, this.handleScroll);
|
||||
document.addEventListener('scroll', this.throttledScrollHandler);
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener('scroll', this.throttledScrollHandler);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,28 @@
|
|||
/* Modified from https://github.com/taylorhakes/fecha
|
||||
*
|
||||
* The MIT License (MIT)
|
||||
*
|
||||
* Copyright (c) 2015 Taylor Hakes
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
/*eslint-disable*/
|
||||
// 把 YYYY-MM-DD 改成了 yyyy-MM-dd
|
||||
(function (main) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,28 @@
|
|||
/**
|
||||
* Modified from https://github.com/sdecima/javascript-detect-element-resize
|
||||
*
|
||||
* version: 0.5.3
|
||||
**/
|
||||
/* Modified from https://github.com/sdecima/javascript-detect-element-resize
|
||||
* version: 0.5.3
|
||||
*
|
||||
* The MIT License (MIT)
|
||||
*
|
||||
* Copyright (c) 2013 Sebastián Décima
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
*/
|
||||
const isServer = typeof window === 'undefined';
|
||||
|
||||
/* istanbul ignore next */
|
||||
|
|
|
|||
Loading…
Reference in New Issue