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; padding: 0;
height: 100%; height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5; background-color: #e5e7eb;
color: #333; color: #333;
} }
* { * {
@ -21,16 +21,23 @@ html {
/* Components panel */ /* Components panel */
#components-panel { #components-panel {
position: relative;
flex: 1; flex: 1;
padding: 10px;
background-color: #fff; background-color: #fff;
border-right: 1px solid #e0e0e0;
display: flex;
flex-direction: column;
}
.components-list {
flex: 1;
padding: 10px;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
gap: 10px; gap: 10px;
border-right: 1px solid #e0e0e0;
} }
.component-item { .component-item {
@ -70,12 +77,42 @@ html {
.component-item span { .component-item span {
font-size: 14px; 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 */
#canvas-panel { #canvas-panel {
flex: 4; flex: 4;
height: 100%; height: 100%;
background-color: #f9f9f9; background-color: #f9fafb;
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 10px;
@ -84,6 +121,10 @@ html {
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
} }
#canvas-panel .grid-stack-item-content {
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.global-save-button-container { .global-save-button-container {
position: absolute; position: absolute;

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

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

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

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

Write Preview
Loading…
Cancel
Save