minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 拖拽布局-页面支持两个实例

Browse Source
master
lichaojun 3 days ago
parent 0a725cc1f0
commit 6c099a6fa9
2 changed files with 101 additions and 77 deletions
Show Stats Download Patch File Download Diff File

9
demoHtml/flex/index.html
Unescape Escape View File

@ -63,7 +63,14 @@
<!-- <div class="global-save-button-container">
<button class="global-save-button">保存布局</button>
</div> -->
<div class="grid-stack"></div>
<div
id="main-screen"
class="grid-stack"
></div>
<div
id="welcome-screen"
class="grid-stack"
></div>
</div>
<!-- 当前选中组件属性 -->
<div id="props-panel">

133
demoHtml/flex/js/index.js
Unescape Escape View File

@ -1,51 +1,20 @@
(function () {
let initData = null;
let grid = null;
let currentComponent = null;
let cellHeight = 60;
// 生成唯一id
var generateUniqueId = function () {
const timestamp = Date.now().toString(36);
const randomNum = Math.random().toString(36).substring(2);
return timestamp + randomNum;
let main = {
grid: null,
initData: null,
};
/** 初始化 */
var init = function () {
const initDataStorage = localStorage.getItem('initData');
if (!initDataStorage) {
initData = {
id: `grid_${generateUniqueId()}`,
children: [],
version: '1.0.0',
width: 1920,
height: 1080,
let welcome = {
grid: null,
initData: null,
};
} else {
initData = JSON.parse(initDataStorage);
conputedInitData('init');
}
console.log(initData, 'initData');
let currentComponent = null;
let cellHeight = 60;
// 让gridstack知道如何渲染，组件children中的content直接渲染html
GridStack.renderCB = function (el, w) {
el.innerHTML = w.content;
};
grid = GridStack.init({
// 一行高度
cellHeight,
// 间距
margin: 0,
minRow: Math.floor(1080 / 2 / cellHeight),
maxRow: Math.floor(1080 / 2 / cellHeight),
acceptWidgets: true,
float: true,
removable: '#trash',
// subGridOpts: subOptions,
// subGridDynamic: true,
children: initData.children,
});
GridStack.setupDragIn('#components-panel .component-item', undefined, [
{
w: 2,
@ -68,7 +37,7 @@
childrenType: '',
name: '文本',
background: '#fff',
fontSize: '14px',
fontSize: 14,
color: '#333',
text: '文本',
fontWeight: 'normal',
@ -81,22 +50,65 @@
downId: '',
},
]);
console.log(grid, 'grid实例');
// 生成唯一id
var generateUniqueId = function () {
const timestamp = Date.now().toString(36);
const randomNum = Math.random().toString(36).substring(2);
return timestamp + randomNum;
};
/** 初始化 */
var init = function (type, self) {
// debugger;
const initDataStorage = localStorage.getItem(`${type}Data`);
if (!initDataStorage) {
self['initData'] = {
id: `grid_${generateUniqueId()}`,
children: [],
version: '1.0.0',
width: 1920,
height: 1080,
};
} else {
self['initData'] = JSON.parse(initDataStorage);
conputedInitData('init', self);
}
console.log(self['initData'], `${type}Data`);
self['grid'] = GridStack.init(
{
// 一行高度
cellHeight,
// 间距
margin: 0,
minRow: Math.floor(1080 / 2 / cellHeight),
maxRow: Math.floor(1080 / 2 / cellHeight),
acceptWidgets: true,
float: true,
removable: '#trash',
// subGridOpts: subOptions,
// subGridDynamic: true,
children: self['initData'].children,
},
`#${type}-screen`
);
console.log(self['grid'], `${type}.grid实例`);
// grid.load(initData.children);
grid.engine.nodes.forEach((item) => {
handleAddComponent(item);
self['grid'].engine.nodes.forEach((item) => {
handleAddComponent(item, self);
});
grid.on('added', function (_event, itemArray) {
self['grid'].on('added', function (_event, itemArray) {
console.log(itemArray, '这里触发了添加了added事件');
itemArray.forEach((item) => {
handleAddComponent(item);
handleAddComponent(item, self);
});
});
grid.on('removed', function (_event, itemArray) {
self['grid'].on('removed', function (_event, itemArray) {
console.log(itemArray, '这里触发了移除removed事件');
itemArray.forEach((item) => {
handleRemoveComponent(item);
@ -105,7 +117,7 @@
};
// 处理添加组件之后的操作
var handleAddComponent = (component) => {
var handleAddComponent = (component, self) => {
if (!component.id) {
component.id = `${component.type}_${generateUniqueId()}`;
}
@ -124,13 +136,13 @@
// 将当前选中组件的属性显示在右侧列表中
setCurrentComponentProps(currentComponent);
// 设置上下左右移动组件ID
setMoveComponentId(currentComponent);
setMoveComponentId(currentComponent, self);
});
};
// 设置上下左右移动组件ID
var setMoveComponentId = function (component) {
const allComponents = grid.save();
var setMoveComponentId = function (component, self) {
const allComponents = self['grid'].save();
if (allComponents.length <= 1) {
return;
}
@ -297,9 +309,9 @@
};
// 保存的时候计算x,y,w,h
var conputedInitData = function (type) {
var conputedInitData = function (type, self) {
if (type === 'save') {
let initDataCopy = JSON.parse(JSON.stringify(initData));
let initDataCopy = JSON.parse(JSON.stringify(self['initData']));
initDataCopy.children.forEach((item) => {
item.xCopy = item.x;
item.x = item.x * (1920 / 12);
@ -313,12 +325,13 @@
}
item.hCopy = item.h;
item.h = item.h * cellHeight * 2;
item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
});
console.log(initDataCopy);
return initDataCopy;
}
if (type === 'init') {
initData.children.forEach((item) => {
self['initData'].children.forEach((item) => {
item.x = item.xCopy;
item.y = item.yCopy;
item.w = item.wCopy;
@ -331,14 +344,18 @@
// grid.addWidget({ w: 2, content: 'item 1' });
// console.log(grid.save());
// console.log(grid);
initData.children = grid.save();
console.log(initData);
localStorage.setItem('initData', JSON.stringify(conputedInitData('save')));
main.initData.children = main.grid.save();
welcome.initData.children = welcome.grid.save();
console.log(main.initData);
console.log(welcome.initData);
localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
});
/** 执行方法 */
$(function () {
init();
init('main', main);
init('welcome', welcome);
// 调用绑定
bindComponentEvents();
});

Write Preview
Loading…
Cancel
Save