|
|
|
|
@ -19,19 +19,18 @@
|
|
|
|
|
minRow: 8,
|
|
|
|
|
acceptWidgets: true,
|
|
|
|
|
float: true,
|
|
|
|
|
removable: '#trash',
|
|
|
|
|
});
|
|
|
|
|
GridStack.setupDragIn('#components-panel .component-item', undefined, [
|
|
|
|
|
GridStack.setupDragIn('#components-panel > .component-item', undefined, [
|
|
|
|
|
{
|
|
|
|
|
w: 12,
|
|
|
|
|
h: 2,
|
|
|
|
|
type: 'banner',
|
|
|
|
|
name: '我是轮播图',
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
color: '#333',
|
|
|
|
|
background: '#fff',
|
|
|
|
|
color: '#fff',
|
|
|
|
|
background: 'red',
|
|
|
|
|
detail: '',
|
|
|
|
|
icon: 'fa-image',
|
|
|
|
|
icon: 'fa-link',
|
|
|
|
|
link: '',
|
|
|
|
|
},
|
|
|
|
|
{ w: 2, h: 1 },
|
|
|
|
|
@ -71,13 +70,6 @@
|
|
|
|
|
handleAddComponent(item);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
grid.on('removed', function (_event, itemArray) {
|
|
|
|
|
console.log(itemArray, '这里触发了移除removed事件');
|
|
|
|
|
itemArray.forEach((item) => {
|
|
|
|
|
handleRemoveComponent(item);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 处理添加组件之后的操作
|
|
|
|
|
@ -91,27 +83,15 @@
|
|
|
|
|
}
|
|
|
|
|
currentComponent = component;
|
|
|
|
|
// 右侧显示组件属性列表
|
|
|
|
|
if (!$('#props-panel').find('form').is(':visible')) {
|
|
|
|
|
$('#props-panel').find('.wait-box').hide();
|
|
|
|
|
$('#props-panel').find('form').show();
|
|
|
|
|
if (!$('#props-panel').find('form').hasClass('show')) {
|
|
|
|
|
$('#props-panel').find('.wait-box').addClass('hidden');
|
|
|
|
|
$('#props-panel').find('form').attr('class', 'show');
|
|
|
|
|
}
|
|
|
|
|
// 将当前选中组件的属性显示在右侧列表中
|
|
|
|
|
setCurrentComponentProps(currentComponent);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var handleRemoveComponent = (component) => {
|
|
|
|
|
if (currentComponent && currentComponent.id === component.id) {
|
|
|
|
|
currentComponent = null;
|
|
|
|
|
// 右侧显示请选择组件
|
|
|
|
|
if (!$('#props-panel').find('wait-box').is(':visible')) {
|
|
|
|
|
console.log('111');
|
|
|
|
|
$('#props-panel').find('.wait-box').show();
|
|
|
|
|
$('#props-panel').find('form').hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//将当前选中组件的属性显示在右侧列表中
|
|
|
|
|
var setCurrentComponentProps = function (component) {
|
|
|
|
|
const form = $('#props-panel').find('form');
|
|
|
|
|
@ -124,72 +104,32 @@
|
|
|
|
|
form.find('#link').val(component.link);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 定义组件设置配置策略
|
|
|
|
|
const componentStrategies = {
|
|
|
|
|
name: function (el, value) {
|
|
|
|
|
el.find('span').text(value);
|
|
|
|
|
},
|
|
|
|
|
background: function (el, value) {
|
|
|
|
|
el.find('.grid-stack-item-content').css('background', value);
|
|
|
|
|
},
|
|
|
|
|
fontSize: function (el, value) {
|
|
|
|
|
el.find('span').css('font-size', value + 'px');
|
|
|
|
|
},
|
|
|
|
|
color: function (el, value) {
|
|
|
|
|
el.find('span').css('color', value);
|
|
|
|
|
},
|
|
|
|
|
icon: function (el, value) {
|
|
|
|
|
el.find('i').attr('class', `fas ${value}`);
|
|
|
|
|
},
|
|
|
|
|
// detail, link不需要反显页面所有不需要修改dom
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 设置当前传递组件的视图展示
|
|
|
|
|
var setComponentView = function (component, fields = null) {
|
|
|
|
|
var setComponentView = function (component) {
|
|
|
|
|
const el = $(component.el);
|
|
|
|
|
|
|
|
|
|
// 确定要处理的属性
|
|
|
|
|
const propsToHandle = fields || Object.keys(componentStrategies);
|
|
|
|
|
|
|
|
|
|
// 遍历并执行对应的策略
|
|
|
|
|
propsToHandle.forEach((prop) => {
|
|
|
|
|
if (componentStrategies[prop] && component[prop] !== undefined) {
|
|
|
|
|
componentStrategies[prop](el, component[prop]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 定义映射关系：元素ID -> 事件类型 -> 组件属性
|
|
|
|
|
const elementMappings = {
|
|
|
|
|
name: { event: 'blur', property: 'name' },
|
|
|
|
|
background: { event: 'blur', property: 'background' },
|
|
|
|
|
fontSize: { event: 'blur', property: 'fontSize' },
|
|
|
|
|
color: { event: 'blur', property: 'color' },
|
|
|
|
|
icon: { event: 'blur', property: 'icon' },
|
|
|
|
|
detail: { event: 'blur', property: 'detail' },
|
|
|
|
|
link: { event: 'blur', property: 'link' },
|
|
|
|
|
// icon: { event: 'change', property: 'icon' }, // select使用change
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 统一绑定函数
|
|
|
|
|
var bindComponentEvents = function () {
|
|
|
|
|
Object.keys(elementMappings).forEach((elementId) => {
|
|
|
|
|
const mapping = elementMappings[elementId];
|
|
|
|
|
const $element = $('#' + elementId);
|
|
|
|
|
|
|
|
|
|
if ($element.length) {
|
|
|
|
|
// 组件名称添加失去焦点事件或者change事件
|
|
|
|
|
$element.off(mapping.event).on(mapping.event, function () {
|
|
|
|
|
const value = $(this).val();
|
|
|
|
|
currentComponent[mapping.property] = value;
|
|
|
|
|
setComponentView(currentComponent, [mapping.property]);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 设置名称
|
|
|
|
|
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}`);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$('.save-container').click(function () {
|
|
|
|
|
// grid.addWidget({ w: 2, content: 'item 1' });
|
|
|
|
|
$('.global-save-button').click(function () {
|
|
|
|
|
grid.addWidget({ w: 2, content: 'item 1' });
|
|
|
|
|
console.log(grid.save());
|
|
|
|
|
console.log(grid);
|
|
|
|
|
});
|
|
|
|
|
@ -197,7 +137,5 @@
|
|
|
|
|
/** 执行方法 */
|
|
|
|
|
$(function () {
|
|
|
|
|
init();
|
|
|
|
|
// 调用绑定
|
|
|
|
|
bindComponentEvents();
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|