A split panel for vue3, using TS
npm install @pori15/split-pane- @pori15/split-pane 是一个基于 Vue3+TypeScript 的分割面板组件,功能类似于 vscode 的面板分割,常见于在线代码编辑器、管理后台等需要灵活布局的场景。
- 支持垂直(左右)和水平(上下)分割模式
- 支持嵌套使用,可创建复杂的多面板布局
- 提供完善的无障碍访问支持
- 响应式设计,适配移动设备
``bash`
npm install @pori15/split-pane --save
或使用 pnpm(推荐)
`bash`
pnpm add @pori15/split-pane
`vue
vertical-A
horizontal-B
vertical-C
vertical-D
`
| 属性名 | 类型 | 默认值 | 说明 |
| -------------- | ------ | ------ | ------------------------------------------------------------------------------ |
| minPercent | Number | 10 | 面板的最小尺寸百分比 |
| defaultPercent | Number | 50 | 面板的默认尺寸百分比 |
| split | String | - | 分割方向:'vertical'(垂直分割,左右布局)或'horizontal'(水平分割,上下布局) |
| className | String | - | 分割条的自定义类名,用于自定义样式 |
| 名称 | 说明 |
| ----- | -------------------- |
| paneL | 左侧或上侧面板的内容 |
| paneR | 右侧或下侧面板的内容 |
| 事件名 | 参数 | 说明 |
| ------ | --------------- | ------------------------------------------------ |
| resize | percent: number | 当面板大小调整时触发,返回当前分割位置的百分比值 |
可以在任意面板内嵌套使用SplitPane组件,创建复杂的多面板布局:
`vue`
主要内容
控制台输出
通过提供自定义className,可以覆盖默认的分割条样式:
`vue
`
组件内置了ARIA属性支持,提供了良好的无障碍访问体验:
- 分割面板容器具有 role="presentation"和 aria-label="可调整大小的分割面板"role="separator"
- 分割条具有 ,可通过键盘操作aria-valuenow`属性
- 面板大小变化时会更新
- 支持所有现代浏览器
- 针对移动设备进行了触摸优化
MIT