Splitter 分隔面板

可将区域水平或垂直分隔，并通过拖拽自由调整各区域的大小。

import { createApp } from 'vue'
import { ElSplitter, ElSplitterPanel } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElSplitter)
app.use(ElSplitterPanel)

基础用法

最基础的用法，如果未传入默认尺寸则平均分配。

垂直布局

通过 layout="vertical" 切换为垂直方向。

可折叠

collapsible 属性为面板提供快速收缩按钮，配合 min 可防止折叠后再被拖出。

禁用拖动

任一面板设置 resizable=false，对应的拖拽条会被禁用。

面板大小

使用 v-model:size 可以绑定面板大小，支持像素或百分比字符串。

延迟

启用 lazy 后，拖动过程中面板尺寸不实时变化，松开时才更新。

API

Splitter Attributes

属性名	说明	类型	默认值
layout	布局方向	horizontal / vertical	horizontal
lazy	是否使用懒加载	boolean	false

Splitter Events

事件名	说明	回调参数
resize-start	开始调整面板大小	(index)
resize	拖拽调整中	(sizes, index)
resize-end	调整结束	(index)
collapse	折叠面板	(index, type)

SplitterPanel Attributes

属性名	说明	类型	默认值
size / v-model:size	面板大小（像素或百分比）	string / number	—
min	最小尺寸	string / number	—
max	最大尺寸	string / number	—
resizable	是否可调整	boolean	true
collapsible	是否可折叠	boolean	false

完整 API 参考 Element Plus Splitter。