npm install q-backtop
<template>
<q-backtop />
</template>
<script>
import { QBacktop } from 'q-backtop'
export default {
components: {
QBacktop
}
}
</script>
<q-backtop :reverse="true" position="top-right" :scroll-offset="1000" icon="vertical_align_bottom" text="直达底部" />
参数 | 类型 | 默认 | 说明 |
---|---|---|---|
scroll-offset | int | 200 | 滚动偏移量,从该位置开始在页面上显示该组件 |
reverse | boolean | false | 反向(直达底部) |
right | int | 20 | 距离边界水平距离 |
bottom | int | 20 | 距离边界垂直距离 |
position | string | bottom-right | 组件位置:top-right,top,right,bottom,left,...... |
round | boolean | true | 是否圆形 |
icon | string | vertical_align_top | 图标 |
color | string | primary | 颜色 |
glossy | boolean | false | 光泽效果 |
text | string | 返回顶部 | 鼠标悬停提示 |
- 当 reverse 为 true 时,为反向效果,页面将滚动到底部,此时可修改参数:position,scroll-offset,icon,text 实现更好显示效果。