vue2项目中 使用golden layout（版本2.6.0）

1、安装golden-layout

npm i golden-layout

2、在main.ts中引入样式文件

import 'golden-layout/dist/css/goldenlayout-base.css'
import 'golden-layout/dist/themes/goldenlayout-dark-theme.css'

3、创建测试组件

 4、配置菜单

创建layout-config.ts文件

5、创建my-golden-layout.vue

<template>
    <div ref="goldenLayoutContainer" class="my-layout-container">
        <div class="menu">
            <span v-for="item in menuItems" class="menu-item" @click="addComp(item)">{{item.title}}</span>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';
    import {GoldenLayout} from 'golden-layout'
    import {MENU_ITEMS} from "@/views/golden-layout/layout-config";

    @Component
    export default class MyGoldenLayout extends Vue {
        gl: any = null;
        menuItems = MENU_ITEMS;

        mounted() {
            this.init()
        }

        init() {
            this.gl = new GoldenLayout(this.$refs.goldenLayoutContainer as any);

            this.menuItems.forEach((item: any) => {
                this.gl.registerComponentFactoryFunction(item.componentType, (container: any, state: any) => {
                    console.log(container, state);
                    new (Vue.extend(item.componentState.instance))({propsData: state}).$mount(container.element);
                });
            });


            this.gl.loadLayout({
                root: {
                    type: 'stack',
                    content: [this.menuItems[0],this.menuItems[1]],
                    activeItemIndex: 1
                }
            })
        }

        addComp(item: any) {
            this.gl.addComponent(item.componentType, {}, item.title)
        }


    }
</script>

<style>
    .my-layout-container {
        width: 100%;
        height: 100%;
    }

    .menu {
        display: flex;
        border-bottom: 1px solid #1ebeff;
    }

    .menu .menu-item {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid;
        cursor: pointer;
    }
</style>

 简单demo，有很多需完善，仅供自己参考用，不喜勿喷。