Resize-pane NPM

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