基于vue2与GoldenLayout开发的多窗口布局插件-1
以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>'); });
}
这样就可以创建多个不同名的布局组件了。
