KB UI

Appearance

Splitter 分隔面板 ​

可拖拽调整相邻面板占比，支持键盘微调与纵向布局。

基础用法 ​

v-model 是各面板的百分比数组，长度即面板数量。

vue
<template>
  <KbSplitter v-model="sizes" style="height:200px">
    <template #panel-0>左侧</template>
    <template #panel-1>右侧</template>
  </KbSplitter>
</template>

<script setup>
import { ref } from 'vue'
const sizes = ref([50, 50])
</script>
左侧
右侧

多面板 ​

数组长度大于 2 时会渲染对应数量的分隔条，拖拽只影响相邻两个面板。

vue
<template>
  <KbSplitter v-model="sizes" style="height:200px">
    <template #panel-0>一</template>
    <template #panel-1>二</template>
    <template #panel-2>三</template>
  </KbSplitter>
</template>

<script setup>
import { ref } from 'vue'
const sizes = ref([25, 40, 35])
</script>

纵向布局 ​

vue
<template>
  <KbSplitter v-model="sizes" layout="vertical" style="height:240px">
    <template #panel-0>上</template>
    <template #panel-1>下</template>
  </KbSplitter>
</template>

最小占比 ​

min 限制相邻面板各自的最小占比，键盘与拖拽都受此约束。

vue
<template>
  <KbSplitter v-model="sizes" :min="20" style="height:160px">
    <template #panel-0>左</template>
    <template #panel-1>右</template>
  </KbSplitter>
</template>

键盘操作 ​

分隔条可获得焦点，按方向键以 2% 步进调整：横向布局用 ← →，纵向布局用 ↑ ↓。

API ​

Props ​

属性类型默认值说明
modelValuenumber[][50, 50]各面板占比（%），长度即面板数量
layout'horizontal' | 'vertical''horizontal'排列方向
minnumber10面板最小占比（%）
disabledbooleanfalse禁用拖拽

事件 ​

事件参数说明
update:modelValuenumber[]占比变化

插槽 ​

插槽说明
panel-{index}第 index 个面板内容