引入

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

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

选项

选项描述typedefault
split分割类型(垂直或水平)String [horizontal,vertical]必填
min-percent左侧(顶部)最小占比Number10
max-percent左侧(顶部)最大占比Number10
default-percent默认窗格宽(左侧或顶部)占比Number50

案例

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