伸缩框 ResizeBox
ResizeBox 伸缩框组件的基础使用。通过设置 directions，可以指定四条边中的哪几条边可以进行伸缩。
ResizeBox 的 width 和 height 都支持 v-model。
定制伸缩杆内容
Section titled “定制伸缩杆内容”可通过插槽 resize-trigger 定制各个方向的伸缩杆的内容。
在布局中使用
Section titled “在布局中使用”Layout 组件中集成了 ResizeBox 组件，可以在 Layout 中使用可伸缩的侧边栏。
<resize-box> Props
Section titled “<resize-box> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| width (v-model) | 宽度 | number | - |
| height (v-model) | 高度 | number | - |
| component | 伸缩框的 html 标签 | string | 'div' |
| directions | 可以进行伸缩的边，有上、下、左、右可以使用 | ('left' | 'right' | 'top' | 'bottom')[] | ['right'] |
<resize-box> Events
Section titled “<resize-box> Events”| 事件名 | 描述 | 参数 |
|---|---|---|
| moving-start | 拖拽开始时触发 | ev: MouseEvent |
| moving | 拖拽时触发 | size: { width: number; height: number; }ev: MouseEvent |
| moving-end | 拖拽结束时触发 | ev: MouseEvent |
<resize-box> Slots
Section titled “<resize-box> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| resize-trigger | 伸缩杆的内容 | direction: 'left' | 'right' | 'top' | 'bottom' |
| resize-trigger-icon | 伸缩杆的图标 | direction: 'left' | 'right' | 'top' | 'bottom' |