BackTop 回到顶部

页面内容较长时，滚动到指定高度后显示回到顶部按钮。

何时使用

  • 页面内容较长、需要快速回到顶部时。

滚动页面后右下角出现按钮

基础用法

<script setup lang="ts">
import { BackTop } from "@reglow/reui";
</script>

<template>
  <BackTop />

  <!-- 自定义出现高度 -->
  <BackTop :visibility-height="200" />

  <!-- 自定义样式与内容 -->
  <BackTop :style="{ bottom: '100px', right: '50px' }">
    ↑
  </BackTop>
</template>

导入

import { BackTop } from "@reglow/reui";

Props

属性类型默认值说明
visibilityHeightnumber400滚动多少高度后显示（px）
styleCSSProperties-自定义按钮样式

插槽

插槽说明
default自定义按钮内容（默认向上箭头图标）
Toast 轻提示
对用户操作做出及时反馈，顶部居中显示并自动消失。比 Notification 更轻量，通常仅一行内容。
ConfigProvider 全局化配置
为组件提供统一的语言、主题、尺寸等全局配置