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

SplitButton 分裂按钮

主按钮 + 下拉箭头复合，用于一组相关动作。

基础用法

主按钮触发 click，箭头打开下拉，下拉项触发 select(value, item)。

背景

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>

<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'save' },
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>

<template>
  <div class="demo-row">
    <CfSplitButton :items="items" @click="alert('Save')" @select="(v) => alert(`Picked: ${v}`)">
      Save
    </CfSplitButton>
    <CfSplitButton variant="secondary" :items="items">More</CfSplitButton>
    <CfSplitButton variant="danger" :items="[{label: '永久删除', value: 'delete', danger: true}]">Delete</CfSplitButton>
  </div>
</template>

<CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
Save
</CfSplitButton>

<CfSplitButton items={items} onClick={save} onSelect={(v) => onPick(v)}>
Save
</CfSplitButton>

尺寸

3 档尺寸跟着 --control-h token 变化。

背景

<script setup lang="ts">
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save as draft', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>

<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

<script setup>
import { CfSplitButton } from '@chufix-design/vue';
const items = [
  { label: 'Save', value: 'draft' },
  { label: 'Save and publish', value: 'publish' },
];
</script>

<template>
  <div class="demo-row" style="align-items: center; gap: 12px;">
    <CfSplitButton size="sm" :items="items">Small</CfSplitButton>
    <CfSplitButton size="md" :items="items">Medium</CfSplitButton>
    <CfSplitButton size="lg" :items="items">Large</CfSplitButton>
  </div>
</template>

<CfSplitButton size="sm" items={items}>Small</CfSplitButton>
<CfSplitButton size="md" items={items}>Medium</CfSplitButton>
<CfSplitButton size="lg" items={items}>Large</CfSplitButton>

<CfSplitButton size="sm" items={items}>Small</CfSplitButton>
<CfSplitButton size="md" items={items}>Medium</CfSplitButton>
<CfSplitButton size="lg" items={items}>Large</CfSplitButton>

API

属性	类型	默认值	说明
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'ghost' \| 'danger'`	`'primary'`	复用 Button variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`items`	`SplitButtonItem[]`	—	下拉项 `{ label, value, disabled?, danger? }`
`disabled` / `loading`	`boolean`	`false`

事件：click（主按钮）、select(value, item)（下拉项）。