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
LCJ-MinYa 3 weeks ago
parent 3a821f8637
commit 04ecb079b7
3 changed files with 104 additions and 28 deletions
Show Stats Download Patch File Download Diff File

49
demoHtml/flex/css/index.css
Unescape Escape View File

@ -5,7 +5,7 @@ html {
padding: 0;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
background-color: #e5e7eb;
color: #333;
}
* {
@ -21,16 +21,23 @@ html {
/* Components panel */
#components-panel {
position: relative;
flex: 1;
padding: 10px;
background-color: #fff;
border-right: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
}
.components-list {
flex: 1;
padding: 10px;
overflow-y: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
gap: 10px;
border-right: 1px solid #e0e0e0;
}
.component-item {
@ -70,12 +77,42 @@ html {
.component-item span {
font-size: 14px;
}
.action-btn {
position: relative;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.action-btn .trash-container,
.action-btn .save-container {
width: 46%;
height: 40px;
margin: 0 2%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(0, 123, 255, 0.6);
color: #fff;
font-size: 14px;
cursor: pointer;
}
.save-container {
background: rgb(0, 123, 255, 1) !important;
}
.action-btn .trash-container > span,
.action-btn .save-container > span {
margin-left: 5px;
}
/* Canvas panel */
#canvas-panel {
flex: 4;
height: 100%;
background-color: #f9f9f9;
background-color: #f9fafb;
position: relative;
overflow-y: auto;
padding: 10px;
@ -84,6 +121,10 @@ html {
cursor: pointer;
background: #fff;
}
#canvas-panel .grid-stack-item-content {
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.global-save-button-container {
position: absolute;

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

@ -26,30 +26,45 @@
<div id="app">
<!-- 组件列表 -->
<div id="components-panel">
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
<div class="components-list">
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-images"></i><span>轮播图</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-search"></i><span>搜索</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-tv"></i><span>热门频道</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-video"></i><span>直播</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-thumbs-up"></i><span>推荐内容</span></div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
</div>
</div>
<div class="component-item grid-stack-item">
<div class="grid-stack-item-content"><i class="fas fa-link"></i><span>快捷入口</span></div>
<div
class="action-btn"
id="trash"
>
<div class="trash-container">
<i class="fas fa-trash"></i>
<span>拖动删除</span>
</div>
<div class="save-container">
<i class="fas fa-trash"></i>
<span>保存布局</span>
</div>
</div>
</div>
<!-- 画布容器 -->
<div id="canvas-panel">
<div class="global-save-button-container">
<!-- <div class="global-save-button-container">
<button class="global-save-button">保存布局</button>
</div>
</div> -->
<div class="grid-stack"></div>
</div>
<!-- 当前选中组件属性 -->

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

@ -19,8 +19,9 @@
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,
@ -70,6 +71,13 @@
handleAddComponent(item);
});
});
grid.on('removed', function (_event, itemArray) {
console.log(itemArray, '这里触发了移除removed事件');
itemArray.forEach((item) => {
handleRemoveComponent(item);
});
});
};
// 处理添加组件之后的操作
@ -83,15 +91,27 @@
}
currentComponent = component;
// 右侧显示组件属性列表
if (!$('#props-panel').find('form').hasClass('show')) {
$('#props-panel').find('.wait-box').addClass('hidden');
$('#props-panel').find('form').attr('class', 'show');
if (!$('#props-panel').find('form').is(':visible')) {
$('#props-panel').find('.wait-box').hide();
$('#props-panel').find('form').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');
@ -168,8 +188,8 @@
});
};
$('.global-save-button').click(function () {
grid.addWidget({ w: 2, content: 'item 1' });
$('.save-container').click(function () {
// grid.addWidget({ w: 2, content: 'item 1' });
console.log(grid.save());
console.log(grid);
});

Write Preview
Loading…
Cancel
Save