Split 分割面板

可拖拽调整大小的分割面板，支持水平和垂直方向、双向绑定比例、自定义分割条大小、禁用拖拽等。

水平分割

默认为水平方向，拖拽中间分割条调整左右面板比例。

左面板

右面板

垂直分割

设置 direction 为 vertical 实现上下分割，分割线自动变为横向手柄。

上方面板

下方面板

双向绑定

通过 v-model:ratio 绑定分割比例，可用于外部控制或读取当前比例。

左面板

右面板

当前比例：40%

限制范围

通过 min 和 max 限制拖拽范围，下方示例限制为 20%~50%。

受限面板 (20%~50%)

右面板

自定义分割条

通过 bar-size 设置分割条宽度(px)，hover 时高亮提示可拖拽。

左面板

右面板

禁用拖拽

设置 disabled 禁止拖拽调整比例。

固定比例面板

右面板

嵌套分割

Split 可以嵌套使用，实现多区域复杂布局。

侧边面板

主内容区域

底部区域

自定义内容

面板中放置任意内容，如图表、列表、代码编辑器等。

文件列表

index.vue

main.ts

app.vue

nuxt.config.ts

package.json

编辑器

// 选择左侧文件查看内容
const greeting = 'Hello World'
console.log(greeting)

事件名	类型	说明
`update:ratio`	`(ratio: number) => void`	比例变化时触发（用于 v-model）
`resize`	`(ratio: number) => void`	拖拽结束时触发，返回当前比例

插槽名	说明
`1`	第一个面板内容
`2`	第二个面板内容