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

SpeedDial 速拨按钮

可展开的 FAB，多个子操作；4 方向 + click/hover 触发；hover 显示标签。

基础用法

主按钮点击 / hover 后展开 actions 数组里的所有子操作。展开方向（direction）和位置（position）独立配置；label 默认 hover 出现，可改为 always / never。

背景视口

点击右下角 + 展开三个子操作（这里 fixed 在 demo 区域内）。

src/App.vue

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

const actions = [
  { key: 'note',  label: '记事',   iconPath: 'M4 2h12v20H4z M7 6h6M7 10h6M7 14h4' },
  { key: 'photo', label: '拍照',   iconPath: 'M3 6h4l2-2h6l2 2h4v12H3z M12 16a4 4 0 100-8 4 4 0 000 8z' },
  { key: 'mic',   label: '语音',   iconPath: 'M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3z M5 11a7 7 0 0014 0 M12 18v3' },
];

function onAction(key: string) {
  console.log('SpeedDial action', key);
}
</script>
<template>
  <div class="demo-scope">
    <CfSpeedDial :actions="actions" @action="onAction" />
    <p class="demo-hint">点击右下角 + 展开三个子操作（这里 fixed 在 demo 区域内）。</p>
  </div>
</template>
<style scoped>
.demo-scope {
  position: relative;
  min-height: 240px;
  background: var(--bg-1);
  border-radius: var(--r-6);
}
.demo-scope :deep(.cf-speeddial) { position: absolute; right: 16px; bottom: 16px; }
.demo-hint { padding: 12px 16px 0; color: var(--fg-3); }
</style>

<script setup>
import { CfSpeedDial } from '@chufix-design/vue';

const actions = [
  { key: 'note',  label: '记事',   iconPath: 'M4 2h12v20H4z M7 6h6M7 10h6M7 14h4' },
  { key: 'photo', label: '拍照',   iconPath: 'M3 6h4l2-2h6l2 2h4v12H3z M12 16a4 4 0 100-8 4 4 0 000 8z' },
  { key: 'mic',   label: '语音',   iconPath: 'M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3z M5 11a7 7 0 0014 0 M12 18v3' },
];

function onAction(key) {
  console.log('SpeedDial action', key);
}
</script>
<template>
  <div class="demo-scope">
    <CfSpeedDial :actions="actions" @action="onAction" />
    <p class="demo-hint">点击右下角 + 展开三个子操作（这里 fixed 在 demo 区域内）。</p>
  </div>
</template>
<style scoped>
.demo-scope {
  position: relative;
  min-height: 240px;
  background: var(--bg-1);
  border-radius: var(--r-6);
}
.demo-scope :deep(.cf-speeddial) { position: absolute; right: 16px; bottom: 16px; }
.demo-hint { padding: 12px 16px 0; color: var(--fg-3); }
</style>

import { CfSpeedDial } from '@chufix-design/react';

export default function Demo() {
  const actions = [
    { key: 'note',  label: '记事',   iconPath: 'M4 2h12v20H4z M7 6h6M7 10h6M7 14h4' },
    { key: 'photo', label: '拍照',   iconPath: 'M3 6h4l2-2h6l2 2h4v12H3z M12 16a4 4 0 100-8 4 4 0 000 8z' },
    { key: 'mic',   label: '语音',   iconPath: 'M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3z M5 11a7 7 0 0014 0 M12 18v3' },
  ];

  function onAction(key: string) {
    console.log('SpeedDial action', key);
  }
  return (
    <>
      <div className="demo-scope">
          <CfSpeedDial actions={actions} onAction={onAction} />
          <p className="demo-hint">点击右下角 + 展开三个子操作（这里 fixed 在 demo 区域内）。</p>
        </div>
    </>
  );
}

import { CfSpeedDial } from '@chufix-design/react';

export default function Demo() {
  const actions = [
    { key: 'note',  label: '记事',   iconPath: 'M4 2h12v20H4z M7 6h6M7 10h6M7 14h4' },
    { key: 'photo', label: '拍照',   iconPath: 'M3 6h4l2-2h6l2 2h4v12H3z M12 16a4 4 0 100-8 4 4 0 000 8z' },
    { key: 'mic',   label: '语音',   iconPath: 'M12 2a3 3 0 013 3v6a3 3 0 11-6 0V5a3 3 0 013-3z M5 11a7 7 0 0014 0 M12 18v3' },
  ];

  function onAction(key) {
    console.log('SpeedDial action', key);
  }
  return (
    <>
      <div className="demo-scope">
          <CfSpeedDial actions={actions} onAction={onAction} />
          <p className="demo-hint">点击右下角 + 展开三个子操作（这里 fixed 在 demo 区域内）。</p>
        </div>
    </>
  );
}

与 Fab 的区别

CfFab 是单一主操作；CfSpeedDial 是”主操作之外，还想暴露 2–5 个二级操作”的场景。两者底层共享设计 token（圆形、accent 主色、shadow），不互相依赖。

API

属性	类型	默认	说明
`actions`	`SpeedDialAction[]`	`—`	子操作列表
`direction`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	展开方向
`position`	`'bottom-right' \| 'bottom-left' \| 'bottom-center' \| 'top-right' \| 'top-left'`	`'bottom-right'`	角落位置（含 safe-area）
`trigger`	`'click' \| 'hover'`	`'click'`	触发方式
`showLabels`	`'hover' \| 'always' \| 'never'`	`'hover'`	标签显示模式
`open` / `defaultOpen`	`boolean`	— / `false`	受控 / 默认展开
`ariaLabel`	`string`	`'展开操作'`	主按钮 aria-label