Backtop 返回顶部
任意容器返回顶部。常见于项目需要返回顶部时。
基础用法
- 当指定
target
时,组件会对其滚动事件做监听,值可以是 id 或者 class。 - 不指定
target
时,组件默认会从组件调用位置开始向上查找到最近的滚动元素。 - 组件默认会渲染在 body 下,可以设置
popperAppendToBody
关闭或者打开。
vue
<template>
<gov-backtop />
</template>
自定义显示
通过默认插槽可以自定义一个返回顶部。
vue
<template>
<gov-backtop bottom="100">
<div class="gov-demo-backtop__custom">
<img src="./top.png" alt="返回顶部" />
</div>
</gov-backtop>
</template>
更多拓展
如果你有更多自定义,例如你需要一个咨询按钮和返回并排,你也可以在咨询按钮标签上设置 @click.stop
来阻止冒泡,仅把 Backtop
当做一个容器。
Attributes
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
visibilityHeight | Number | 200 | 滚动时触发显示回到顶部按钮的高度,单位 px。 |
target | String | "" | 指定滚动的目标元素,可以是 CSS 选择器或元素 ID。如不设置,则默认从组件调用位置开始,向上查找第一个滚动元素。 |
right | Number / String | 40 | 回到顶部按钮距离页面右侧的距离,支持数字和字符串(如 40 , '40px')。 |
bottom | Number / String | 40 | 回到顶部按钮距离页面底部的距离,支持数字和字符串(如 40 , '40px')。 |
zIndex | Number | 2000 | 回到顶部按钮的 z-index 层级。 |
appendToBody | Boolean | true | 是否将组件挂载到 body 上。 |
Events
事件名 | 说明 |
---|---|
backtop | 点击返回顶部事件。 |
Slots
插槽 | 说明 |
---|---|
default | 自定义返回顶部的内容显示。 |