vue2-golden-layout

基于vue2.x 实现 GoldenLayout1.5.9版本的 部分功能

Installation

npm i -S vue2-golden-layout

示例

npm install
npm run dev

示例在/examples文件夹

使用及依赖

import VueGoldenLayout from 'vue2-golden-layout'
Vue.use(VueGoldenLayout)

添加布局基本css及主题，可选light或dark

import 'golden-layout/src/css/goldenlayout-base.css'
import 'golden-layout/src/css/goldenlayout-light-theme.css'

<vue-golden-layout></vue-golden-layout>

默认配置的布局是堆栈

布局组件自定义配置

创建布局组件需要配置相应数据，包括布局类型、组件名称等。

结构

分别有 row、column、stack三种，行\列\堆栈。

配置 config

config = {
  settings: {
    selectionEnabled: true,  // 可通过点击选择布局项目
    showCloseIcon: false,    // 不显示关闭图标
  },
  content: [  //每个项目（组件除外）都可以有子项，在数组中指定content
    {
      type: "column",
      content: [
        {
          type: "component",
          title: 'example1',  //项目在其选项卡和弹出窗口中显示的标题 （title可不设，默认标题为componentName）
          componentName: "example",  //指定应创建哪个组件
          componentState: { text: "Component 1" }, //可以是任何可序列化的对象，并将传递给组件
        },
        {
          type: "component",
          title: 'example2',
          componentName: "example2",
          componentState: { text: "Component 2" },
        }
      ]
    }
  ]
}

如需使用其他功能，需使用props 传递相应的标识使用相应功能

• scroll: 给布局添加滚动条
• saving: 将布局保存在localStorage中
• css: 给布局添加背景颜色
• reorder: 布局重新排序
• newElement: 添加的新布局配置
• spread: 切换布局样式
• mainNode: 布局位置父组件的类名
• close: 自定义关闭组件

布局组件内容

给布局组件添加DOM作为内容，需要创建存放子组件数据的循环数组

<vue-golden-layout ref="goldenLayout" mainNode="main">
      <div v-for="item in allItems" :key="item.id">
        <span>{{item.address}}</span>
      </div>
</vue-golden-layout>

添加布局组件

添加新布局组件时，需要配置新布局的组件名及内容，监听add()方法将新的配置项添加至页面。

  var newItem = {  //新布局配置
    type: 'component',
    componentName: "componentName",
    componentState: { key: data.id }  //key: 作为匹配循环子组件的id,将子组件放入相应的布局组件内容中
  }
  this.$refs.goldenLayout.add(newItem)

自定义关闭布局组件

关闭布局组件时，可用 getCloseItem() 监听自定义事件。

  getCloseItem(tab, layout) 
  tab: 当前删除的布局组件；
  layout: 整个布局的layout实例化组件；

自定义弹出布局组件

自定义激活指定布局组件项，可用 changeSelectedName() 监听自定义事件。

  this.$refs.goldenLayout.changeSelectedName(组件名)

其他config 配置设置可对照官方文档进行配置，更多功能也可查看官方网站示例学习。