FloatButton 悬浮按钮

用于全局页面的快捷操作入口，如回到顶部、帮助、客服等。

悬浮按钮是可以悬浮在页面上的可操作按钮。

何时使用

用于全局页面的快捷操作入口，如回到顶部、帮助、客服等。
悬浮在页面角落，不遮挡主要内容。
需要随时可访问的操作按钮。

导入

import { FloatButton, FloatButtonGroup } from "@reglow/reui";

代码演示

基础用法

最基本的悬浮按钮，默认固定在右下角。

<script setup>
import { FloatButton } from "@reglow/reui";
import { ArrowUp } from "lucide-vue-next";
import { h } from "vue";
</script>

<template>
  <FloatButton :icon="h(ArrowUp)" @click="scrollToTop" />
</template>

尺寸

支持三种尺寸：small、default、large。

<template>
  <FloatButton :icon="h(ArrowUp)" size="small" :position="{ bottom: 200, right: 48 }" />
  <FloatButton :icon="h(ArrowUp)" size="default" :position="{ bottom: 152, right: 48 }" />
  <FloatButton :icon="h(ArrowUp)" size="large" :position="{ bottom: 96, right: 48 }" />
</template>

形状

支持 round（圆形）和 square（方形）两种形状。

<template>
  <FloatButton :icon="h(ArrowUp)" shape="round" :position="{ bottom: 152, right: 48 }" />
  <FloatButton :icon="h(ArrowUp)" shape="square" :position="{ bottom: 96, right: 48 }" />
</template>

类型

支持 default、primary、colorful（多彩）三种类型。

<template>
  <FloatButton :icon="h(ArrowUp)" type="default" :position="{ bottom: 200, right: 48 }" />
  <FloatButton :icon="h(ArrowUp)" type="primary" :position="{ bottom: 152, right: 48 }" />
  <FloatButton :icon="h(ArrowUp)" colorful :position="{ bottom: 96, right: 48 }" />
</template>

点击跳转

通过 href 设置跳转地址，target 指定打开方式。

<template>
  <FloatButton
    :icon="h(ExternalLink)"
    href="https://example.com"
    target="_blank"
    tooltip="打开链接"
  />
</template>

通过 tooltip 属性添加鼠标悬浮提示。

<template>
  <FloatButton :icon="h(HelpCircle)" tooltip="帮助文档" />
</template>

带徽章

通过 badge 属性显示徽章数字。

<template>
  <FloatButton :icon="h(Bell)" :badge="99" />
  <FloatButton :icon="h(Bell)" :badge="999" :position="{ bottom: 200, right: 48 }" />
  <FloatButton :icon="h(Bell)" badge="VIP" :position="{ bottom: 96, right: 48 }" type="primary" />
</template>

禁用状态

<template>
  <FloatButton :icon="h(ArrowUp)" disabled />
</template>

自定义位置

通过 position 属性自定义固定位置。

<template>
  <FloatButton
    :icon="h(ArrowUp)"
    :position="{ top: 100, left: 48 }"
  />
</template>

自定义图标 Slot

通过 #icon slot 自定义图标内容。

<template>
  <FloatButton tooltip="客服">
    <template #icon>
      <MessageCircle class="size-5" />
    </template>
  </FloatButton>
</template>

悬浮按钮组

通过 FloatButtonGroup 传入 items 展示按钮组。

<script setup>
import { FloatButtonGroup } from "@reglow/reui";
import { HelpCircle, MessageCircle, Settings } from "lucide-vue-next";
import { h } from "vue";

const items = [
  { content: "帮助", icon: h(HelpCircle), value: "help" },
  { content: "客服", icon: h(MessageCircle), value: "service", badge: 3 },
  { content: "设置", icon: h(Settings), value: "settings", href: "/settings" },
];
</script>

<template>
  <FloatButtonGroup
    :items="items"
    trigger="hover"
    @click="(value) => console.log(value)"
  />
</template>

按钮组 - 点击触发

<template>
  <FloatButtonGroup
    :items="items"
    trigger="click"
    direction="vertical"
  />
</template>

按钮组 - 水平方向

<template>
  <FloatButtonGroup
    :items="items"
    direction="horizontal"
    :position="{ bottom: 48, right: 120 }"
  />
</template>

API

FloatButton

参数	说明	类型	默认值
icon	显示图标	`VNode`	-
shape	形状	`round \| square`	`round`
size	尺寸	`small \| default \| large`	`default`
type	类型	`default \| primary \| colorful`	`default`
colorful	多彩悬浮按钮	`boolean`	`false`
disabled	禁用状态	`boolean`	`false`
href	点击跳转链接	`string`	-
target	链接打开方式	`string`	-
tooltip	Tooltip 提示文字	`string`	-
badge	徽章数字	`number \| string`	-
position	固定位置	`{ top?, bottom?, left?, right? }`	`{ bottom: 48, right: 48 }`
class	附加类名	`string`	-
style	附加样式	`CSSProperties`	-

FloatButton Events

事件	说明	回调参数
onClick	点击回调	`(e: MouseEvent)`

FloatButton Slots

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

FloatButtonGroup

参数	说明	类型	默认值
items	按钮组子项	`FloatButtonGroupItem[]`	`[]`
trigger	触发方式	`hover \| click`	`hover`
shape	形状	`round \| square`	`round`
size	尺寸	`small \| default \| large`	`default`
disabled	禁用状态	`boolean`	`false`
direction	展开方向	`vertical \| horizontal`	`vertical`
position	固定位置	`{ top?, bottom?, left?, right? }`	`{ bottom: 48, right: 48 }`
class	附加类名	`string`	-

FloatButtonGroup Events

事件	说明	回调参数
click	点击子项回调	`(value: string, e: MouseEvent)`

FloatButtonGroup Slots

名称	说明
default	自定义触发器图标

FloatButtonGroupItem

参数	说明	类型	默认值
content	文本内容（Tooltip）	`string`	-
icon	显示图标	`VNode`	-
href	点击跳转链接	`string`	-
target	链接打开方式	`string`	-
badge	徽章数字	`number \| string`	-
value	item 标识	`string`	-

尺寸对照

size	宽高	图标大小
small	40px	16px
default	48px	20px
large	56px	24px

Cropper 图片裁切

自由裁切图片，支持缩放、旋转与固定比例

Overlay 浮层管理