前端页面分割 vue-splitpane

vue

npm install vue-splitpane

#import
import splitPane from 'vue-splitpane'

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

我的实例 vue element ui

<template>
  <div>
    <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>
  </div>
</template>

两列的例子

 <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>

三列的例子

   <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>

选项设置

属性 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