Install

npm install resize-pane

支持vue2.0

Quick Start

在main.js中引入

import resizePane from "resize-pane";

Vue.use(resizePane);

resize-pane

可通过鼠标拖拽，调整各子窗格大小

基础使用

一组resize-pane和多组resize-pane-item标签组成，通过增加resize-pane-item标签组来增加窗格数量。 resize-pane子级只能为resize-pane-item标签，其他标签将被忽略

<resize-pane>
  <resize-pane-item>
    pane1
  </resize-pane-item>
  <resize-pane-item>
    pane2
  </resize-pane-item>
  <resize-pane-item>
    pane3
  </resize-pane-item>
</resize-pane>

横向布局

默认用法为纵向布局，通过设置direction属性，改变布局方向

<resize-pane direction="horizontal">
  <resize-pane-item>
    horizontal-pane1
  </resize-pane-item>
  <resize-pane-item>
    horizontal-pane2
  </resize-pane-item>
  <resize-pane-item>
    horizontal-pane3
  </resize-pane-item>
</resize-pane>

嵌套使用

resize-pane-item可嵌套resize-pane，形成层层嵌套的布局结构。但是resize-pane-item子级内部只能嵌套一组resize-pane，多余resize-pane将被忽略

<resize-pane>
  <resize-pane-item>
    1
  </resize-pane-item>
  <resize-pane-item>
    <resize-pane direction="horizontal">
      <resize-pane-item>
        2-1
      </resize-pane-item>
      <resize-pane-item>
        2-2
      </resize-pane-item>
    </resize-pane>
  </resize-pane-item>
  <resize-pane-item>
    <resize-pane direction="horizontal">
      <resize-pane-item>
        <resize-pane>
          <resize-pane-item>
            3-1-1
          </resize-pane-item>
          <resize-pane-item>
            3-1-2
          </resize-pane-item>
        </resize-pane>
      </resize-pane-item>
      <resize-pane-item>
        3-2
      </resize-pane-item>
    </resize-pane>
  </resize-pane-item>
</resize-pane>

resize-pane 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- |---- |---- | | direction | 布局方向 | string | horizontal / vertical | vertical | | minSize | 窗格最小值, 大于的整数 | number | — | 10 |

resize-pane-item 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | size | 初始值 | number | — | — | | minSize | 窗格最小值, 需要设置为大于0的整数。如果设置了padding，且padding之和大于了miniSize,则以padding为最小值 | number | — | resize-pane的miniSize大小 | | disabled | 禁止当前pane伸缩 | boolean | true/false | false | | visible | 是否显示当前pane | boolean | true/false | true |

minSize

层层嵌套的组件中，最小值是以当前pane所有相同方向的后代pane之和控制

size

各个pane-item的size之和大于了pane的宽或高时，忽略size设置，直接平均分配各个item的宽或高

visible

由外部控制单个pane的显示隐藏，默认全部都显示，通过控制visible的值控制某一个item的显隐