Split Pane Component For Vue.js 2

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

Preview:

vue-split-pane

Download Details:

Author: PanJiaChen

Live Demo: http://panjiachen.github.io/split-pane/demo/index.html

Download Link: https://github.com/PanJiaChen/vue-split-pane/archive/master.zip

Official Website: https://github.com/PanJiaChen/vue-split-pane

Last Update: December 13, 2017

Views Total: 812

Install:

# NPM
$ npm install vue-splitpane --save

Add Comment