开发预览更新于 2026-05-10

FloatButton 悬浮按钮

固定在视口角落的圆形按钮，常用于「联系客服」「打开购物车」「写新内容」入口。

基础用法

默认 position: fixed，bottom 与 right 默认 24px。tooltip 在悬停时通过 title 显示，badge 渲染右上角小红点徽标。

背景

真实页面里 FloatButton 默认是 position: fixed，固定在视口右下；这里 demo 用 style="position: absolute" 把它锁在容器内，方便演示。

<script setup lang="ts">
import { CfFloatButton } from '@chufix-design/vue';
</script>

<template>
  <div style="position: relative; height: 220px; border: 1px dashed var(--line-1); border-radius: 8px; padding: 16px;">
    <p style="margin: 0; color: var(--fg-2);">真实页面里 FloatButton 默认是 <code>position: fixed</code>，固定在视口右下；这里 demo 用 <code>style="position: absolute"</code> 把它锁在容器内，方便演示。</p>
    <CfFloatButton
      :style="{ position: 'absolute' }"
      tooltip="联系客服"
      badge="3"
      :bottom="16"
      :right="16"
      variant="primary"
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      </svg>
    </CfFloatButton>
  </div>
</template>

<CfFloatButton tooltip="联系客服" badge="3" bottom={24} right={24} variant="primary">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8..." />
</svg>
</CfFloatButton>

API

属性	类型	默认值	说明
`shape`	`'circle' \| 'square'`	`'circle'`	按钮形状
`variant`	`'default' \| 'primary'`	`'default'`	视觉强度
`tooltip`	`string`	`—`	悬停提示文本（通过 `title` 显示）
`badge`	`string \| number`	`—`	右上角徽标文字；为空时不显示
`bottom` / `right` / `top` / `left`	`number`	`bottom: 24, right: 24`	距视口边缘的偏移；与 CSS 同义
`ariaLabel`	`string`	等同 `tooltip`	屏幕阅读器标签

事件：onClick(evt) —— 点击按钮。