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

Splitter 分隔面板

拖拽中间分隔条调整两侧面板尺寸；横竖两向、键盘可达、可受控。

基础用法

v-model 绑定一个数字。unit="%"（默认）时它是百分比，unit="px" 时是像素。min / max 锁定边界。键盘聚焦分隔条后：← / → 微调（Shift 跳 10），Home / End 直接到极值。

背景

侧栏

当前宽度：35%。拖动中间分隔条调整。

主区域

键盘可用：聚焦分隔条后 ←→ 微调，Shift+←→ 跳大步，Home/End 直接到极值。

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

const size = ref(35);
</script>

<template>
  <div style="height: 240px; border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfSplitter v-model="size" :min="15" :max="85">
      <template #start>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 8px;">侧栏</h3>
          <p style="margin: 0; font-size: 12px; color: var(--fg-3);">
            当前宽度：{{ Math.round(size) }}%。拖动中间分隔条调整。
          </p>
        </div>
      </template>
      <template #end>
        <div style="padding: 16px;">
          <h3 style="margin: 0 0 8px;">主区域</h3>
          <p style="margin: 0; font-size: 12px; color: var(--fg-3);">
            键盘可用：聚焦分隔条后 ←→ 微调，Shift+←→ 跳大步，Home/End 直接到极值。
          </p>
        </div>
      </template>
    </CfSplitter>
  </div>
</template>

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

export default function Demo() {
const [size, setSize] = useState(35);
return (
  <CfSplitter
    value={size}
    min={15}
    max={85}
    start={<div>侧栏</div>}
    end={<div>主区域</div>}
    onChange={setSize}
  />
);
}

竖向

orientation="vertical" 把分隔条横置，上下分割两块面板。常用于编辑器 + 控制台、表格 + 详情这种竖直布局。

背景

编辑器

function hello() {
  return 'hi';
}

控制台

> hi

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

const size = ref(50);
</script>

<template>
  <div style="height: 280px; border: 1px solid var(--line-1); border-radius: 8px; overflow: hidden;">
    <CfSplitter
      v-model="size"
      orientation="vertical"
      :min="20"
      :max="80"
    >
      <template #start>
        <div style="padding: 12px; height: 100%; background: var(--bg-1);">
          <strong>编辑器</strong>
          <pre style="margin: 8px 0 0; font-size: 12px; color: var(--fg-2);">function hello() {{ '{' }}
  return 'hi';
{{ '}' }}</pre>
        </div>
      </template>
      <template #end>
        <div style="padding: 12px; height: 100%; background: var(--bg-2);">
          <strong>控制台</strong>
          <div style="margin-top: 8px; font-family: var(--font-mono); font-size: 12px;">
            &gt; hi
          </div>
        </div>
      </template>
    </CfSplitter>
  </div>
</template>

<CfSplitter
value={size}
orientation="vertical"
min={20}
max={80}
start={<div>编辑器</div>}
end={<div>控制台</div>}
onChange={setSize}
/>

像素单位

unit="px" 把数值切到像素 — 适合需要精准控制侧栏宽度的场景（不希望 % 让宽度跟着窗口变）。

背景

侧栏 — 当前 220px

主区域

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

const size = ref(220);
</script>

<template>
  <CfSplitter v-model="size" unit="px" :min="120" :max="480">
    <template #start>
      <div style="padding: 16px;">侧栏 — 当前 {{ size }}px</div>
    </template>
    <template #end>
      <div style="padding: 16px;">主区域</div>
    </template>
  </CfSplitter>
</template>

<CfSplitter
value={size}
onChange={setSize}
unit="px"
min={120}
max={480}
start={<div>侧栏 — 当前 {size}px</div>}
end={<div>主区域</div>}
/>

禁用

disabled 锁定分隔条 — 仍渲染当前比例，但用户不能拖。常用于演示态或权限受限的视图。

背景

禁用 — 无法拖拽

分隔条仅作展示

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

const size = ref(40);
</script>

<template>
  <CfSplitter v-model="size" disabled>
    <template #start>
      <div style="padding: 16px; color: var(--fg-3);">禁用 — 无法拖拽</div>
    </template>
    <template #end>
      <div style="padding: 16px; color: var(--fg-3);">分隔条仅作展示</div>
    </template>
  </CfSplitter>
</template>

<CfSplitter value={size} disabled />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`number`	`—`	受控尺寸值；省略则用 `defaultSize` 自管
`defaultSize` (Vue) / `defaultValue` (React)	`number`	`30`	初始尺寸
`unit`	`'%' \| 'px'`	`'%'`	数值单位
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	排列方向
`min` / `max`	`number`	`10` / `90`	取值边界（与 unit 一致）
`disabled`	`boolean`	`false`	禁用拖拽
`collapsible`	`boolean`	`false`	启用 Enter / 空格在 `min` 与 `defaultSize` 间切换
`resizeFrom`	`'start' \| 'end'`	`'start'`	数值绑定到哪一侧的尺寸

事件：update:modelValue / resize（React 端：onChange / onResize）。 Slot：start / end（React 用同名 prop 接 ReactNode）。