vue---splitpane分割

首先安装：

npm install vue-splitpane

引入使用：

import splitPane from 'vue-splitpane'

Vue.component('split-pane', splitPane);

分割成两列

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