FloatButton 悬浮按钮

基本使用

最基本的使用。

类型

通过type改变悬浮按钮的类型。

形状

通过shape设置不同的形状。

描述

可以通过description设置文字内容。

仅当shape属性为square时支持。由于空间较小，推荐使用比较精简的双数文字。

悬浮按钮组

按钮组合使用时，推荐使用<FloatButton.Group />，并通过设置shape属性改变悬浮按钮组的形状。悬浮按钮组的shape会覆盖内部FloatButton的shape属性。

菜单模式

设置trigger属性即可开启菜单模式。提供hover和click两种触发方式。

受控模式

设置open设置组件为受控模式，需要配合trigger一起使用。

回到顶部

返回页面顶部的操作按钮。

共同属性

属性	说明	类型	默认值
icon	自定义图标	`IconName`	-
description	描述文字	`string`	-
shape	设置按钮形状	`circle \| square`	`circle`
href	点击跳转的地址，指定此属性`button`的行为和`a`链接一致	`string`	-
target	相当于`a`标签的`target`属性，`href`存在时生效	`string`	-

FloatButton.Group Props 属性

属性	说明	类型	默认值
shape	设置包含的`FloatButton`按钮形状	`circle \| square`	`circle`
trigger	触发方式（有触发方式为菜单模式）	`click \| hover`	-
open	受控展开，需配合`trigger`一起使用	`boolean`	-

FloatButton.Group Events 事件

事件	说明	类型
openChange	点击事件	`({detail: boolean}) => void`

FloatButton.BackTop Props 属性

属性	说明	类型	默认值
duration	回到顶部所需时间（ms）	`number`	450
target	设置需要监听其滚动事件的元素	`HTMLElement \| Window`	window
visibilityHeight	滚动高度达到此参数值才出现 BackTop	`number`	400

FloatButton.BackTop Events事件

事件	说明	类型
click	点击事件	`() => void`

Slots 插槽

插槽名	说明
default	自定义默认内容
icon	自定义图标

FloatButton 悬浮按钮 ​

基本使用 ​

类型 ​

形状 ​

描述 ​

悬浮按钮组 ​

菜单模式 ​

受控模式 ​

回到顶部 ​

共同属性 ​

FloatButton.Group Props 属性 ​

FloatButton.Group Events 事件 ​

FloatButton.BackTop Props 属性 ​

FloatButton.BackTop Events事件 ​

Slots 插槽 ​