vue-splitpane-folding's Introduction

Vue Split Pane

本项目为pan神 https://github.com/PanJiaChen/vue-split-pane 修改版,增加了展开折叠小功能
新增folding参数 true开启折叠功能 false关闭参数不加默认关闭
好多bug哦,慎用,放到github是为了大家修改方便
暂时只设计了垂直分割线的展开折叠功能、如需增加水平展开折叠可以自己看代码加图标,很简单.
折叠的逻辑是把split设置为0,即全部收起.
功能的话直接看demo就可以了

Split-Pane component built with vue2.0, can be split vertically or horizontally.

Try the demo

How to use?

npm install vue-splitpane-folding

#import
import splitPane from 'vue-splitpane-folding'

# use as global component
Vue.component('split-pane', splitPane);

Example

   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical" :folding="true">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        B
      </template>
    </split-pane>

  //nested
   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical" :folding="true">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
           B
          </template>
          <template slot="paneR">
            C
          </template>
        </split-pane>
      </template>
    </split-pane>

Options

Property	Description	type	default
split	the split type	String [horizontal,vertical]	must choose one type
min-percent	paneL max-min-percent	Number	10
max-percent	paneL max-percent	Number	10
folding	折叠展开按钮	Boolean	false
foldingType	折叠类型(long 长显示,hidden 默认隐藏,移动上显示)	String	long or hidden

Recommend Projects