引入

使用vue2.0构建的窗格拆分组件，可以垂直拆分或水平拆分。

npm install vue-splitpane
 
#import 
import SplitPane from 'vue-splitpane'
 
# use as global component 
Vue.component('split-pane', SplitPane);

选项

选项	描述	type	default
`split`	分割类型（垂直或水平）	String [horizontal,vertical]	必填
`min-percent`	左侧（顶部）最小占比	Number	10
`max-percent`	左侧（顶部）最大占比	Number	10
`default-percent`	默认窗格宽（左侧或顶部）占比	Number	50

案例

<template>
  <!-- 图文管理 -->
  <a-card>
    <split-pane
        split="vertical"
        :min-percent='10'
        :max-percent='80'
        :default-percent='20'
        @resize="resize"
        style="width: 100%;height: 800px;"
    >
      <template slot="paneL">
        <div style="background: #FFFFFF;height: 100%;">测试内容</div>
      </template>
      <template slot="paneR">
        <div style="background: #70DB55;height: 100%;">
          <split-pane
              split="horizontal"
              :min-percent='10'
              :max-percent='80'
              :default-percent='20'
              @resize="resize"
              style="width: 100%;height: 800px;"
          >
            <template slot="paneL">
              <div style="background: #1890ff;height: 100%;color: #FFFFFF;">测试内容</div>
            </template>
            <template slot="paneR">
              <div style="background: #795da3;height: 100%;color: #FFFFFF;">测试内容</div>
            </template>
          </split-pane>
        </div>
      </template>
    </split-pane>
  </a-card>
</template>

<script>
import SplitPane from 'vue-splitpane'

export default {
  name: 'SplitPaneTest',
  components: {
    SplitPane
  },
  data() {
    return {}
  },
  methods: {
    resize(percent) {
      console.log("resize", percent)
    }
  }
}
</script>