Vue.js拆分拖动布局 - vue-split-layout

Vue.js拆分拖动布局 - vue-split-layout
插件名称 vue-split-layout
发布时间 2020年10月31日
插件作者 vue-hxs

另一个vue.js组件可为您的应用程序创建拖放拆分布局。

安装和下载:

# NPM
$ npm install vue-split-layout --save

用法

<template>
  <div id="app">
  <Layout :resize="true" :edit="true" :splits="tree">
    <div class="view1"></div> <!-- 0 - view -->
    <Pane title="pane">content</Pane> <!-- 1 - view -->
    <div class="view2"></div> <!-- 2 - view -->
  </Layout>

  </div>
</template>
<script>
import {Layout,Pane} from 'vue-split-layout'
export default {
    components: {Layout}
    data () {
      return {
        tree: {
          dir: 'horizontal', // Left | Right
          // Other split
          first: {
            dir: 'vertical',
            first: 0,    // these numbers represents the views slot ID
            second: 2
          },
          second: 1
        }
     }
  }
}
</script>