Components
ResizablePanel 可调面板
为日志、资源详情和编辑器工作区提供可拖拽且可键盘操作的分栏布局。
双栏工作区
拖动中间分隔线,或聚焦后通过方向键调整左侧面板;Home / End 跳到最小或最大尺寸。
资源
部署日志
deploy.loglog
$ deploy production
✓ Building image
✓ Migrating database
✓ Service healthy左侧宽度:240px
<ResizablePanel v-model="sidebarWidth" :min="160" :max="480">
<template #first><ResourceSidebar /></template>
<template #second><LogViewer /></template>
</ResizablePanel>API 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | number | 280 | 第一个面板的受控像素尺寸。省略时组件维护内部尺寸。 |
defaultSize | number | 280 | 非受控模式的初始尺寸。 |
orientation | 'horizontal' | 'vertical' | 'horizontal' | 分栏方向;horizontal 为左右面板。 |
min / max / step | number | 160 / 自动 / 16 | 尺寸边界与键盘调整步长。 |
resizeStart / resizeEnd | event | — | 拖拽开始和结束事件,结束时提供最终尺寸。 |
first / second | slot | — | 两个面板的内容插槽。 |