主题
Split 分割线
使用
用于分割面板内容。
基础用法
使用v-model指定初始分割比例。
横纵方向
使用direction指定分割线方向。
容器类型
使用component指定容器类型。
自定义初始化比例
在不使用v-model指定初始分割比例，可使用defaultSize设置面板初始分割比例。
嵌套
限制拖动范围
使用min和max限制拖动范围。
禁用拖动
使用disabled禁止拖动
自定义分割线
使用triggerIcon自定义分割线图标。
隐藏图标
使用showTrigger隐藏分割线图标。
API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model / modelValue | 绑定左右面板比例（目前只支持px和0-1之间的数字，不支持rem以及百分比等单位） | number | string | - |
| default-size | 初始左右面板比例（目前只支持px和0-1之间的数字，不支持rem以及百分比等单位） | number | string | 0.5 |
| component | 面板容器 | string | 'div' |
| direction | 分割线方向 | 'horizontal' | 'vertical' | 'horizontal' |
| min | 左侧面板最小宽度 | boolean | - |
| max | 左侧面板最大宽度 | boolean | - |
| disabled | 是否禁用 | boolean | false |
| trigger-icon | 分割线图标 | string | Component | - |
| show-trigger | 是否显示分割线图标 | boolean | true |
| pane1-class | 左侧面板类名 | string | - |
| pane2-class | 右侧面板类名 | string | - |
| pane1-style | 左侧面板样式 | CSSProperties | - |
| pane2-style | 右侧面板样式 | CSSProperties | - |
Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| move-start | 分割线开始拖动时触发 | Function |
| moving | 分割线拖动中触发 | Function |
| move-end | 分割线结束拖动时触发 | Function |
Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| first | 左侧面板内容 | - |
| second | 右侧面板内容 | - |
| trigger | 分割线 | - |
| trigger-icon | 分割线图标 | - |