Split Pane Component For Vue.js 2

Install & Download:

# NPM
$ npm install vue-splitpane --save

Description:

This is a Vue.js 2 component to create draggable, horizontal and vertical split layout.

Usage:

<div id="app" class='components-container'>
  <template>
    <split-pane v-on:resize="resize" :min-percent='20' split="vertical">
      <template slot="paneL">
        A
      </template>
      <template slot="paneR">
        <split-pane split="horizontal">
          <template slot="paneL">
           B
          </template>
          <template slot="paneR">
            <split-pane v-on:resize="resize" split="vertical" :default-percent='30'>
              <template slot="paneL">
               C
              </template>
              <template slot="paneR">
               D
              </template>
            </split-pane>
          </template>
        </split-pane>
      </template>
    </split-pane>
  </template>
</div>

var Main = {
  name: 'test',
  methods: {
    resize() {
      console.log('resize')
    }
  }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')