Skip to content

E
Element
Commit 45383cd6 authored by iamkun's avatar iamkun Committed by luckyCao
Browse files
Options

Backtop: Add backtop component (#15541)

parent 9ea7012c
Show whitespace changes
Inline Side-by-side
Showing with 461 additions and 54 deletions
components.json
View file @ 45383cd6
......@@ -74,5 +74,6 @@
"divider": "./packages/divider/index.js",
"image": "./packages/image/index.js",
"calendar": "./packages/calendar/index.js",
"backtop": "./packages/backtop/index.js",
"infiniteScroll": "./packages/infiniteScroll/index.js"
}
examples/docs/en-US/backtop.md 0 → 100644
View file @ 45383cd6
## Backtop
A button to back to top
### Basic usage
Scroll down to see the bottom-right button.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### Customizations
Display area is 40px \* 40px.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
| right | right distance | number | | 40 |
| bottom | bottom distance | number | | 40 |
### Events
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | triggers when click | click event |
examples/docs/es/backtop.md 0 → 100644
View file @ 45383cd6
## Backtop
A button to back to top
### Basic usage
Scroll down to see the bottom-right button.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### Customizations
Display area is 40px \* 40px.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
| right | right distance | number | | 40 |
| bottom | bottom distance | number | | 40 |
### Events
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | triggers when click | click event |
examples/docs/fr-FR/backtop.md 0 → 100644
View file @ 45383cd6
## Backtop
A button to back to top
### Basic usage
Scroll down to see the bottom-right button.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### Customizations
Display area is 40px \* 40px.
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
| right | right distance | number | | 40 |
| bottom | bottom distance | number | | 40 |
### Events
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | triggers when click | click event |
examples/docs/zh-CN/backtop.md 0 → 100644
View file @ 45383cd6
## Backtop 回到顶部
返回页面顶部的操作按钮
### 基础用法
滑动页面即可看到右下方的按钮。
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
```
:::
### 自定义显示内容
显示区域被固定为 40px \* 40px 的区域, 其中的内容可支持自定义。
:::demo
```html
<template>
Scroll down to see the bottom-right button.
<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
</template>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
| target | 触发滚动的对象 | string | | |
| visibility-height | 滚动高度达到此参数值才出现 | number | | 200 |
| right | 控制其显示位置, 距离页面右边距 | number | | 40 |
| bottom | 控制其显示位置, 距离页面底部距离 | number | | 40 |
### Events
| 事件名 | 说明 | 回调参数 |
| ------ | ------------------ | -------- |
| click | 点击按钮触发的事件 | 点击事件 |
examples/nav.config.json
View file @ 45383cd6
......@@ -268,6 +268,10 @@
"path": "/image",
"title": "Image 图片"
},
{
"path": "/backtop",
"title": "Backtop 回到顶部"
},
{
"path": "/infiniteScroll",
"title": "InfiniteScroll 无限滚动"
......@@ -546,6 +550,10 @@
"path": "/image",
"title": "Image"
},
{
"path": "/backtop",
"title": "Backtop"
},
{
"path": "/infiniteScroll",
"title": "InfiniteScroll"
......@@ -824,6 +832,10 @@
"path": "/image",
"title": "Image"
},
{
"path": "/backtop",
"title": "Backtop"
},
{
"path": "/infiniteScroll",
"title": "InfiniteScroll"
......@@ -1102,6 +1114,10 @@
"path": "/image",
"title": "Image"
},
{
"path": "/backtop",
"title": "Backtop"
},
{
"path": "/infiniteScroll",
"title": "InfiniteScroll"
......
examples/pages/template/component.tpl
View file @ 45383cd6
......@@ -101,38 +101,6 @@
}
}
}
.page-component-up {
background-color: #fff;
position: fixed;
right: 100px;
bottom: 150px;
width: 40px;
height: 40px;
size: 40px;
border-radius: 20px;
cursor: pointer;
transition: .3s;
box-shadow: 0 0 6px rgba(0,0,0, .12);
z-index: 5;
i {
color: #409EFF;
display: block;
line-height: 40px;
text-align: center;
font-size: 18px;
}
&.hover {
opacity: 1;
}
}
.back-top-fade-enter,
.back-top-fade-leave-active {
transform: translateY(-30px);
opacity: 0;
}
}
@media (max-width: 768px) {
......@@ -157,9 +125,6 @@
overflow: auto;
display: block;
}
.page-component-up {
display: none;
}
}
}
</style>
......@@ -173,17 +138,12 @@
<router-view class="content"></router-view>
<footer-nav></footer-nav>
</div>
<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>
<el-backtop
v-if="showBackToTop"
target=".page-component__scroll .el-scrollbar__wrap"
right="100"
bottom="150"
></el-backtop>
</div>
</el-scrollbar>
</template>
......@@ -197,8 +157,6 @@
return {
lang: this.$route.meta.lang,
navsData,
hover: false,
showBackToTop: false,
scrollTop: 0,
showHeader: true,
componentScrollBar: null,
......@@ -238,15 +196,9 @@
}, 50);
}
},
toTop() {
this.hover = false;
this.showBackToTop = false;
this.componentScrollBox.scrollTop = 0;
},
handleScroll() {
const scrollTop = this.componentScrollBox.scrollTop;
this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
if (this.showHeader !== this.scrollTop > scrollTop) {
this.showHeader = this.scrollTop > scrollTop;
}
......@@ -259,6 +211,11 @@
this.scrollTop = scrollTop;
}
},
computed: {
showBackToTop() {
return !this.$route.path.match(/backtop/);
}
},
created() {
bus.$on('navFade', val => {
this.navFaded = val;
......
packages/backtop/index.js 0 → 100644
View file @ 45383cd6
import Backtop from './src/main';
/* istanbul ignore next */
Backtop.install = function(Vue) {
Vue.component(Backtop.name, Backtop);
};
export default Backtop;
packages/backtop/src/main.vue 0 → 100644
View file @ 45383cd6
<template>
<transition name="el-fade-in">
<div
v-if="visible"
@click.stop="handleClick"
:style="{
'right': styleRight,
'bottom': styleBottom
}"
class="el-backtop">
<slot>
<el-icon name="caret-top"></el-icon>
</slot>
</div>
</transition>
</template>
<script>
import throttle from 'throttle-debounce/throttle';
export default {
name: 'ElBacktop',
props: {
visibilityHeight: {
type: Number,
default: 200
},
target: [String],
right: {
type: Number,
default: 40
},
bottom: {
type: Number,
default: 40
}
},
data() {
return {
el: null,
container: null,
visible: false
};
},
computed: {
styleBottom() {
return `${this.bottom}px`;
},
styleRight() {
return `${this.right}px`;
}
},
mounted() {
this.init();
this.throttledScrollHandler = throttle(300, this.onScroll);
this.container.addEventListener('scroll', this.throttledScrollHandler);
},
methods: {
init() {
this.container = document;
this.el = document.documentElement;
if (this.target) {
this.el = document.querySelector(this.target);
if (!this.el) {
throw new Error(`target is not existed: ${this.target}`);
}
this.container = this.el;
}
},
onScroll() {
const scrollTop = this.el.scrollTop;
this.visible = scrollTop >= this.visibilityHeight;
},
handleClick(e) {
this.scrollToTop();
this.$emit('click', e);
},
scrollToTop() {
let el = this.el;
let step = 0;
let interval = setInterval(() => {
if (el.scrollTop <= 0) {
clearInterval(interval);
return;
}
step += 10;
el.scrollTop -= step;
}, 20);
}
},
beforeDestroy() {
this.container.removeEventListener('scroll', this.throttledScrollHandler);
}
};
</script>
packages/theme-chalk/src/backtop.scss 0 → 100644
View file @ 45383cd6
@import "mixins/mixins";
@import "common/var";
@include b(backtop) {
position: fixed;
background-color: $--backtop-background-color;
width: 40px;
height: 40px;
border-radius: 50%;
color: $--backtop-font-color;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 0 6px rgba(0,0,0, .12);
cursor: pointer;
z-index: 5;
&:hover {
background-color: $--backtop-hover-background-color
}
}
packages/theme-chalk/src/common/var.scss
View file @ 45383cd6
......@@ -905,6 +905,15 @@ $--timeline-node-size-normal: 12px !default;
$--timeline-node-size-large: 14px !default;
$--timeline-node-color: $--border-color-light !default;
/* Backtop
--------------------------*/
/// color||Color|0
$--backtop-background-color: $--color-white !default;
/// color||Color|0
$--backtop-font-color: $--color-primary !default;
/// color||Color|0
$--backtop-hover-background-color: $--border-color-extra-light !default;
/* Link
--------------------------*/
/// fontSize||Font|1
......
packages/theme-chalk/src/index.scss
View file @ 45383cd6
......@@ -71,3 +71,4 @@
@import "./divider.scss";
@import "./image.scss";
@import "./calendar.scss";
@import "./backtop.scss";
src/index.js
View file @ 45383cd6
......@@ -75,6 +75,7 @@ import Link from '../packages/link/index.js';
import Divider from '../packages/divider/index.js';
import Image from '../packages/image/index.js';
import Calendar from '../packages/calendar/index.js';
import Backtop from '../packages/backtop/index.js';
import InfiniteScroll from '../packages/infiniteScroll/index.js';
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
......@@ -151,6 +152,7 @@ const components = [
Divider,
Image,
Calendar,
Backtop,
CollapseTransition
];
......@@ -266,5 +268,6 @@ export default {
Divider,
Image,
Calendar,
Backtop,
InfiniteScroll
};
test/unit/specs/backtop.spec.js 0 → 100644
View file @ 45383cd6
import { createVue, destroyVM, wait } from '../util';
describe('Backtop', () => {
let vm;
afterEach(() => {
destroyVM(vm);
});
it('create', async() => {
vm = createVue({
template: `
<div ref="scrollTarget" class="test-scroll" style="height: 100px; overflow: auto">
<div style="height: 10000px; width: 100%">
<el-backtop target=".test-scroll">
<span>test_up_text</span>
</el-backtop>
</div>
</div>
`
}, true);
expect(vm.$el).to.exist;
expect(vm.$el.innerText).to.be.equal('');
vm.$refs.scrollTarget.scrollTop = 2000;
await wait();
expect(vm.$el.innerText).to.be.equal('test_up_text');
});
});
types/backtop.d.ts 0 → 100644
View file @ 45383cd6
import { ElementUIComponent } from './component'
/** Backtop Component */
export declare class ElBacktop extends ElementUIComponent {
/** Backtop target */
target: string
/** Backtop visibility height */
visibilityHeight: string | number
/** Backtop right position */
right: string | number
/** Backtop bottom position */
bottom: string | number
}
types/element-ui.d.ts
View file @ 45383cd6
......@@ -74,6 +74,7 @@ import { ElDivider } from './divider'
import { ElIcon } from './icon'
import { ElCalendar } from './calendar'
import { ElImage } from './image'
import { ElBacktop } from './backtop'
import { ElInfiniteScroll } from './infiniteScroll'
export interface InstallationOptions {
......@@ -322,5 +323,9 @@ export class Icon extends ElIcon {}
/** Calendar Component */
export class Calendar extends ElCalendar {}
/** Backtop Component */
export class Backtop extends ElBacktop {}
/** InfiniteScroll Component */
export class InfiniteScroll extends ElInfiniteScroll {}
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