Vue.js 2的拆分窗格组件 - vue-split-pane

Vue.js 2的拆分窗格组件 - vue-split-pane
插件名称 vue-split-pane
发布时间 2020年11月19日
插件作者 PanJiaChen

这是一个Vue.js 2组件,用于创建可拖动的水平和垂直拆分布局。

安装和下载:

# NPM
$ npm install vue-splitpane --save

用法:

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