ChuFix UI v0.2.1
开发预览 更新于 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>
<script setup>
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}
  />
);
}
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>
<script setup>
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}
/>
<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>
<script setup>
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>}
/>
<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>
<script setup>
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 />
<CfSplitter value={size} disabled />

API

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

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

反馈与讨论

Splitter 分隔面板 的讨论

0
0 / 600
一键发送
正在加载评论...