- BackTop 返回顶部
- 概述
- 代码示例
- API
- BackTop props
- BackTop events
BackTop 返回顶部
概述
当页面内容冗长,需要快捷返回顶部时使用,一般放置在页面右下角位置。
代码示例

基础用法
默认位置距离页面右部和底部 30px,滚动至距顶端 400px 时显示。
<template><BackTop></BackTop></template><script>export default {}</script>

自定义样式
自定义了位置在页面底部 200px,滚动至距顶端 200px 时显示。
<style scoped>.top{padding: 10px;background: rgba(0, 153, 229, .7);color: #fff;text-align: center;border-radius: 2px;}</style><template><BackTop :height="100" :bottom="200"><div class="top">返回顶端</div></BackTop></template><script>export default {}</script>
API
BackTop props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| height | 页面滚动高度达到该值时才显示BackTop组件 | Number | 400 |
| bottom | 组件距离底部的距离 | Number | 30 |
| right | 组件距离右部的距离 | Number | 30 |
| duration | 滚动动画持续时间,单位 毫秒 | Number | 1000 |
BackTop events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| on-click | 点击按钮时触发 | 无 |
