1.0.5 • Published 3 years ago
vue-resize-splitpanel v1.0.5
Vue Split Pane
Split-Pane component built with vue2.0, can be split vertically or horizontally. Support pixel and percent
Fork from https://github.com/PanJiaChen/vue-split-pane
How to use?
npm install vue-resize-splitpanel
#import
import splitPane from 'vue-resize-splitpanel'
# use as global component
Vue.component('vue-resize-splitpanel', splitPane);
Example
<split-pane v-on:resize="resize" :min-size='20' :default-size='30' split="vertical">
/* size若没有单位,则默认是百分比 */
<template slot="paneL">
A
</template>
<template slot="paneR">
B
</template>
</split-pane>
//nested
<split-pane v-on:resize="resize" :min-size='"200px"' :default-size='30' split="vertical">
/* size若没有单位,则默认是百分比 */
<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-size | paneL min-size | Number/String | 10(percent) |
default-size | paneL default-size | Number/String | 10(percent) |