You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.3 KiB
JavaScript
142 lines
4.3 KiB
JavaScript
(function () {
|
|
let grid = null;
|
|
let currentComponent = null;
|
|
|
|
// 生成唯一id
|
|
var generateUniqueId = function () {
|
|
const timestamp = Date.now().toString(36);
|
|
const randomNum = Math.random().toString(36).substring(2);
|
|
return timestamp + randomNum;
|
|
};
|
|
|
|
/** 初始化 */
|
|
var init = function () {
|
|
grid = GridStack.init({
|
|
// 一行高度
|
|
cellHeight: 80,
|
|
// 间距
|
|
margin: 5,
|
|
minRow: 8,
|
|
acceptWidgets: true,
|
|
float: true,
|
|
});
|
|
GridStack.setupDragIn('#components-panel > .component-item', undefined, [
|
|
{
|
|
w: 12,
|
|
h: 2,
|
|
type: 'banner',
|
|
name: '我是轮播图',
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
background: 'red',
|
|
detail: '',
|
|
icon: 'fa-link',
|
|
link: '',
|
|
},
|
|
{ w: 2, h: 1 },
|
|
]);
|
|
console.log(grid, 'grid实例');
|
|
|
|
var initData = [
|
|
// {
|
|
// x: 0,
|
|
// y: 0,
|
|
// w: 2,
|
|
// h: 2,
|
|
// content: 'item 1',
|
|
// data: {
|
|
// name: 'item 1',
|
|
// },
|
|
// },
|
|
// {
|
|
// x: 2,
|
|
// y: 3,
|
|
// w: 3,
|
|
// content: 'item 2',
|
|
// data: {
|
|
// name: 'item 2',
|
|
// },
|
|
// },
|
|
];
|
|
// grid.load(initData);
|
|
|
|
grid.engine.nodes.forEach((item) => {
|
|
handleAddComponent(item);
|
|
});
|
|
|
|
grid.on('added', function (_event, itemArray) {
|
|
console.log(itemArray, '这里触发了添加了added事件');
|
|
itemArray.forEach((item) => {
|
|
handleAddComponent(item);
|
|
});
|
|
});
|
|
};
|
|
|
|
// 处理添加组件之后的操作
|
|
var handleAddComponent = (component) => {
|
|
component.id = `${component.type}_${generateUniqueId()}`;
|
|
setComponentView(component);
|
|
component.el.addEventListener('click', () => {
|
|
console.log('点击组件', component);
|
|
if (currentComponent && currentComponent.id === component.id) {
|
|
return;
|
|
}
|
|
currentComponent = component;
|
|
// 右侧显示组件属性列表
|
|
if (!$('#props-panel').find('form').hasClass('show')) {
|
|
$('#props-panel').find('.wait-box').addClass('hidden');
|
|
$('#props-panel').find('form').attr('class', 'show');
|
|
}
|
|
// 将当前选中组件的属性显示在右侧列表中
|
|
setCurrentComponentProps(currentComponent);
|
|
});
|
|
};
|
|
|
|
//将当前选中组件的属性显示在右侧列表中
|
|
var setCurrentComponentProps = function (component) {
|
|
const form = $('#props-panel').find('form');
|
|
form.find('#name').val(component.name);
|
|
form.find('#background').val(component.background);
|
|
form.find('#fontSize').val(component.fontSize);
|
|
form.find('#color').val(component.color);
|
|
form.find('#icon').val(component.icon);
|
|
form.find('#detail').val(component.detail);
|
|
form.find('#link').val(component.link);
|
|
};
|
|
|
|
// 设置当前传递组件的视图展示
|
|
var setComponentView = function (component) {
|
|
const el = $(component.el);
|
|
// 设置名称
|
|
if (component.name) {
|
|
el.find('span').text(component.name);
|
|
}
|
|
// 设置背景颜色
|
|
if (component.background) {
|
|
el.find('.grid-stack-item-content').css('background', component.background);
|
|
}
|
|
// 设置文字大小和颜色
|
|
if (component.fontSize) {
|
|
el.find('span').css('font-size', component.fontSize + 'px');
|
|
}
|
|
if (component.color) {
|
|
el.find('span').css('color', component.color);
|
|
}
|
|
// 设置图标
|
|
if (component.icon) {
|
|
el.find('i').attr('class', `fas ${component.icon}`);
|
|
}
|
|
};
|
|
|
|
$('.global-save-button').click(function () {
|
|
grid.addWidget({ w: 2, content: 'item 1' });
|
|
console.log(grid.save());
|
|
console.log(grid);
|
|
});
|
|
|
|
/** 执行方法 */
|
|
$(function () {
|
|
init();
|
|
});
|
|
})();
|