1. Backtop回到顶部
1.1. Backtop返回页面顶部的操作按钮。
1.2. Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
target | 触发滚动的对象 | string | 无 | 无 |
visibility-height | 滚动高度达到此参数值才出现 | number | 无 | 200 |
right | 控制其显示位置, 距离页面右边距 | number | 无 | 40 |
bottom | 控制其显示位置, 距离页面底部距离 | number | 无 | 40 |
1.3. Events
事件名 | 说明 | 回调参数 |
click | 点击按钮触发的事件 | 点击事件 |
1.4. 注释: 不建议使用target属性, 极其难以使用。
2. Backtop回到顶部例子
2.1. 使用脚手架新建一个名为element-ui-backtop折叠面板的前端项目, 同时安装Element插件。
2.2. 编辑index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Backtop from '../components/Backtop.vue'
import MyselfBacktop from '../components/MyselfBacktop.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', redirect: '/Backtop' },
{ path: '/Backtop', component: Backtop },
{ path: '/MyselfBacktop', component: MyselfBacktop }
]
const router = new VueRouter({
routes
})
export default router
2.3. 在components下创建Backtop.vue
<template>
<div class="myPage">
<h1>基础用法</h1>
<h4>滑动页面即可看到右下方的按钮。</h4>
<el-backtop :bottom="600"></el-backtop>
</div>
</template>
<style scoped>
.myPage {
width: 100%;
height: 1500px;
}
.myPage h1 {
margin-top: 300px;
}
</style>
2.4. 在components下创建MyselfBacktop.vue
<template>
<div class="myPage">
<h1>自定义显示内容</h1>
<el-backtop :visibility-height="10" :bottom="600"><div class="up">UP</div></el-backtop>
</div>
</template>
<style scoped>
.myPage {
width: 100%;
height: 1500px;
}
.myPage .up {
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}
</style>
2.5. 运行项目, 访问http://localhost:8080/#/Backtop
2.6. 运行项目, 访问http://localhost:8080/#/MyselfBacktop