FloatButton 悬浮按钮

固定在视图角落的按钮。

基本使用

主色 + 徽标

方形

图标按钮

通过 #icon slot 放入任意图标组件（推荐 <c-icon>）；description 同时存在时图标在上、文字在下。icon prop 仅适用于 iconfont 类名（无内置字体图标时为空，按需使用）。

链接跳转

href + target 使按钮作为链接使用，例如「联系我们」「打开文档」。

悬浮提示（tooltip）

tooltip 鼠标 hover 时显示提示文字。

多按钮组合

当前没有独立 FloatButtonGroup 组件；通过 inset-* 偏移叠放多个 FloatButton，构成右下角操作组。

BackTop 回到顶部

滚动到 400px 以下后右下角出现「回到顶部」按钮，点击平滑滚回顶端。

BackTop 自定义阈值

visibility-height 控制按钮出现的滚动阈值（默认 400px），duration 控制滚回动画时长（默认 450ms）。 target 可传选择器、滚动元素、window，或返回滚动目标的函数；运行时切换 target 会迁移监听并取消旧容器上的滚动动画。

可访问性与动态效果

• FloatButton 始终使用原生 <button> 或 <a>。纯图标按钮请通过 aria-label 提供操作名称；tooltip 只提供原生 title 提示，不能替代所有场景下的明确命名。
• 徽标是视觉提示，不会自动加入可访问名称；需要朗读数量时，应把数量包含在 aria-label 中。
• BackTop 默认名称为 Back to top，可直接传入本地化 aria-label 覆盖。系统启用“减少动态效果”时，滚回操作立即完成，并关闭悬浮位移和显隐过渡。

BackTop 自定义形状 / 类型

shape / type / icon 与 FloatButton 一致，可定制按钮外观。

API

FloatButton Props

参数	类型	默认值	说明
shape	'circle' | 'square'	'circle'	形状
type	'default' | 'primary'	'default'	类型
description	string	—	内部文字（与 icon 同时存在时在下方）
icon	string	—	iconfont CSS 类名；推荐改用 #icon slot 放 <c-icon>
badge	number | string	—	右上角徽标数
href	string	—	链接地址
target	string	—	链接 target（_blank 等）
tooltip	string	—	悬浮提示文字

FloatButton Slots

名称	说明
icon	自定义图标（覆盖 icon prop，推荐 <c-icon>）
description	自定义文字内容（覆盖 description prop）

BackTop Props

参数	类型	默认值	说明
visibilityHeight	number	400	滚动条到达多少 px 时显示按钮
duration	number	450	滚回顶部的动画时长（ms）
target	string | HTMLElement | Window | (() => HTMLElement | Window)	window	监听滚动的目标容器
shape	'circle' | 'square'	'circle'	形状
type	'default' | 'primary'	'default'	类型
icon	string	—	iconfont CSS 类名；推荐改用 #icon slot 放 <c-icon>

Events

FloatButton 与 BackTop 都会在可用状态下发送 click(event: MouseEvent)；BackTop 随后滚动当前 target。