基于golden-layout1.5.9版本与vue2.0开发的多窗口布局管理

以golden-layout官方网站版本，用vue2.x 开发的多布局管理

前提准备：

查询官网，因为此插件是基于jQuery开发的，需要引入jQuery，和自带的css及js文件：

import 'golden-layout/src/css/goldenlayout-base.css'
import 'golden-layout/src/css/goldenlayout-dark-theme.css'
import 'golden-layout/lib/jquery'

官方示例中，主要功能基本都需要写注册组件的方法才能实施，而且配置布局每一个都不一样，需要配置想要的初始布局，及布局的组件名。并且注册组件的方法需要组件名，及指定组件内容，最后初始化组件，就可开始拖拽布局页面了。

配置布局：
var config = {
    content: [{
        type: 'row',
        content: [{
            type:'component',
            componentName: 'example',
            componentState: { text: 'Component 1' }
        },
        {
            type:'component',
            componentName: 'example',
            componentState: { text: 'Component 2' }
        }]
    }]
};
实例化GoldenLayout
var myLayout = new window.GoldenLayout( config, $('#layoutContainer') );
注册组件及添加指定内容
myLayout.registerComponent( 'example', function( container, state ){
    container.getElement().html( '<h2>' + state.text + '</h2>');
});
初始化布局
myLayout.init()

一、自定义公共组件<vue-golden-layout>： 由于配置布局是自定义的，所以打算将注册组件等功能封装在公共组件中，并且使用props来接收不同的配置布局。 公共组件vue-golden-layout:   <template>    </template>
<script> import GoldenLayout from "golden-layout"; export default {   name: "VueGoldenLayout",   // 传入数据配置数据   props: {     config: {       required: false,     },   },   methods: {    //创建布局： 　　createLayout(){

　　var myLayout = new GoldenLayout( this.config, $('#layoutContainer') );

　　myLayout.registerComponent( 'example', function( container, state ){
    　　container.getElement().html( '<h2>' + state.text + '</h2>');
　　});

　　myLayout.init();
 }

 }   } </script> <style></style>

 二、使用公共组件vue-golden-layout：

在使用vue-golden-layout组件时，要在父组件中传递必填项—— config配置布局。

父组件：   <template>   <vue-golden-layout :config="config"></vue-golden-layout> </template>
<script> export default {   name: "column",   data() {     return {       config: {         content: [           {             type: "column",             content: [               {                 type: "component",                 componentName: "example1",                 componentState: { text: "Component 1" },               },               {                 type: "component",                 componentName: "example2",                 componentState: { text: "Component 2" },               },               {                 type: "component",                 componentName: "example3",                 componentState: { text: "Component 3" },               },             ],           },         ],       },     };   } }; </script>
<style> </style>

由于注册组件时需要组件名，但是要想设置不一样的组件名，注册组件就不能一个一个的去写方法注册，所以获取组件名的数组，循环注册组件。

// 返回组件名     arrConfig(config) {       let minify = (this.minify = GoldenLayout.minifyConfig(config));       let arrCom = [];       minify.g[0].g.forEach((e) => {         if (e.l == "5") {           arrCom.push(e.h);         } else {           e.g.forEach((com) => {             arrCom.push(com.h);           });         }       });       this.arrCom = arrCom;       return arrCom;     },     // 循环注册组件 for (let ele of arrCom) {           layout.registerComponent(ele, (container, state) => {             container.getElement().html( '<h2>' + state.text + '</h2>');           });         }  这样就可以创建多个不同名的布局组件了。

标签：golden,layout,arrCom,text,多窗口,组件,config,layout1.5
来源： https://www.cnblogs.com/zaj121/p/16650652.html