使用 vue2-golden-layout

林不二 lv.1

发布时间：2022-10-19 22:15:04 448

相关标签： # css# html# jquery

使用配置：

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( '' + state.text + '
');
});
初始化布局
myLayout.init()

文章来源： https://blog.51cto.com/u_15175907/5765359

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。