当前位置 : 主页 > 网络编程 > PHP >

使用 vue2-golden-layout

来源:互联网 收集:自由互联 发布时间:2023-10-08
使用配置: import 'golden-layout/src/css/goldenlayout-base.css' import 'golden-layout/src/css/goldenlayout-dark-theme.css' import 'golden-layout/lib/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( '<h2>' + state.text + '</h2>');
});
初始化布局
myLayout.init()




上一篇:ant-design-vue 搜索表格数据
下一篇:没有了
网友评论