@vtian/vue3-split-panel

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