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
flex-api
lichaojun 1 month ago
parent 2424933509
commit 0defd00fd0
2 changed files with 101 additions and 22 deletions
Show Stats Download Patch File Download Diff File

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

@ -169,7 +169,7 @@ html {
padding: 5px;
display: flex;
gap: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tab-button {
@ -180,7 +180,9 @@ html {
border-radius: 6px;
font-size: 14px;
color: #333;
transition: background-color 0.3s, color 0.3s;
transition:
background-color 0.3s,
color 0.3s;
}
.tab-button:hover {
@ -200,14 +202,15 @@ html {
background-color: #e2e2e2;
border-radius: 8px;
width: 960px;
cursor: pointer !important; /* 强制光标为指针，覆盖 gridstack 的默认设置 */
}
.grid-stack-item-content {
cursor: pointer;
cursor: grab; /* 将光标明确设置为抓手 */
background: #fff;
}
#canvas-panel .grid-stack-item-content {
border-radius: 8px;
border: 1px solid #e0e0e0;
border: 0px solid #e0e0e0;
}
.global-save-button-container {

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

@ -31,7 +31,7 @@
upId: '',
downId: '',
focusedStyle_background: '',
focusedStyle_border_width: '',
focusedStyle_border_width: 0,
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
@ -54,7 +54,7 @@
upId: '',
downId: '',
focusedStyle_background: '',
focusedStyle_border_width: '',
focusedStyle_border_width: 0,
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
@ -79,6 +79,7 @@
width: 1920,
height: 1080,
background: '#e2e2e2',
image: '', // 为画布添加image属性
};
} else {
self['initData'] = JSON.parse(initDataStorage);
@ -86,6 +87,16 @@
}
console.log(self['initData'], `${type}Data`);
// 初始化时应用画布背景
const canvasId = `${type}-screen`;
if (self.initData.image) {
$('#' + canvasId)
.css('background-image', `url(${self.initData.image})`)
.css('background-size', 'cover');
} else if (self.initData.background) {
$('#' + canvasId).css('background-color', self.initData.background);
}
self['grid'] = GridStack.init(
{
// 一行高度
@ -137,6 +148,15 @@
if (currentComponent && currentComponent.id === component.id) {
return;
}
// 1. 解绑可能存在的画布属性事件处理器
$('#props-panel form').find('#image, #background').off();
// 2. 重新绑定通用的组件事件处理器
bindComponentEvents();
// 3. 重置属性面板标题并显示所有表单项，为显示组件属性做准备
$('#props-panel .panel-title span').text('组件属性');
$('#props-panel form .form-item').show();
// 清除之前选中组件的获取焦点后的样式
clearOldFocusStyle();
currentComponent = component;
@ -320,15 +340,21 @@
},
focusedStyle_border_width: function (el, value) {
if (!value) return;
if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('border-width', value + 'px');
}
},
focusedStyle_border_color: function (el, value) {
if (!value) return;
if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('border-color', value);
}
},
focusedStyle_scale: function (el, value) {
if (!value) return;
if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('transform', `scale(${value})`);
}
},
};
@ -459,22 +485,72 @@
localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
});
// 给画布添加点击事件，用于取消组件的选中状态
// 给画布添加点击事件，用于编辑画布属性
$('#main-screen, #welcome-screen').on('click', function (e) {
// 确保点击的是画布背景，而不是某个组件
if (e.target === this) {
console.log('点击了画布背景，取消组件选中');
// 如果有当前选中的组件
if (e.target !== this) {
return;
}
console.log('点击了画布背景，编辑画布属性');
// 1. 如果有，则取消当前选中的组件
if (currentComponent) {
// 清除旧组件的焦点样式
clearOldFocusStyle();
// 重置当前组件变量
currentComponent = null;
// 将右侧属性面板重置为初始状态
$('#props-panel .wait-box').show();
$('#props-panel form').hide();
}
// 2. 更新右侧面板以显示画布属性
$('#props-panel .panel-title span').text('画布属性');
$('#props-panel .wait-box').hide();
const $form = $('#props-panel form');
$form.show();
// 3. 只显示画布相关的表单项
$form.find('.form-item').hide(); // 首先隐藏所有
$form.find('#image').parent().show(); // 显示背景图片
$form.find('#background').parent().show(); // 显示背景颜色
// 4. 获取当前点击的画布及其数据对象
const canvasId = this.id; // "main-screen" 或 "welcome-screen"
const type = canvasId.split('-')[0]; // "main" 或 "welcome"
const canvasData = type === 'main' ? main : welcome;
// 5. 将当前画布的属性值填充到表单中
$form.find('#image').val(canvasData.initData.image || '');
$form.find('#background').val(canvasData.initData.background || '');
// 6. 为画布属性输入框绑定新的事件
$form.find('#image, #background').off(); // 先解绑旧事件，防止重复绑定
$form.find('#image').on('change', function () {
const imageUrl = $(this).val();
canvasData.initData.image = imageUrl;
if (imageUrl) {
$('#' + canvasId)
.css('background-image', `url(${imageUrl})`)
.css('background-size', 'cover');
// 当设置图片时，清空背景色
$('#' + canvasId).css('background-color', '');
canvasData.initData.background = '';
$form.find('#background').val('');
} else {
// 如果选择的是“请选择”，则只移除背景图片
$('#' + canvasId).css('background-image', 'none');
}
});
$form.find('#background').on('blur', function () {
const color = $(this).val();
canvasData.initData.background = color;
if (color) {
// 当设置颜色时，清空背景图片
$('#' + canvasId).css('background-color', color);
$('#' + canvasId).css('background-image', 'none');
canvasData.initData.image = '';
$form.find('#image').val('');
}
});
});
});
})();

Write Preview
Loading…
Cancel
Save