Skip to content
Split-Pane component built with vue2.0, can be split vertically or horizontally. http://panjiachen.github.io/split-pane/demo/index.html
Branch: master
Clone or download
Latest commit cf61ce8 Mar 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo fix typo (#10) Jan 18, 2019
dist update Mar 14, 2019
src Fix:slot 传入 iFrame 拖动失效问题 (#12) Mar 14, 2019
.babelrc init Jul 7, 2017
.eslintignore init Jul 7, 2017
.eslintrc.js init Jul 7, 2017
.gitignore init Jul 7, 2017
README.md Match import name (#9) Oct 15, 2018
package.json [release] v1.0.4 Mar 14, 2019
webpack.config.js init Jul 7, 2017

README.md

Vue Split Pane

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

Try the demo

How to use?

npm install vue-splitpane

#import
import splitPane from 'vue-splitpane'

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

Example

   <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertical">
      <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">
      <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
You can’t perform that action at this time.