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 1 day ago
parent 6c099a6fa9
commit ffdc2bc8b1
3 changed files with 108 additions and 12 deletions
Show Stats Download Patch File Download Diff File

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

@ -78,7 +78,6 @@ html {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.component-item .grid-stack-item-content,
.grid-stack-item .grid-stack-item-content {
@ -154,7 +153,7 @@ html {
justify-content: center;
}
.grid-stack {
background-color: #f9fafb;
background-color: #e2e2e2;
border-radius: 8px;
width: 960px;
}

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

@ -67,10 +67,10 @@
id="main-screen"
class="grid-stack"
></div>
<div
<!-- <div
id="welcome-screen"
class="grid-stack"
></div>
></div> -->
</div>
<!-- 当前选中组件属性 -->
<div id="props-panel">
@ -183,6 +183,34 @@
<option value="">请选择</option>
</select>
</div>
<div class="form-item">
<label for="focusedStyle_background">获得焦点时背景颜色</label>
<input
type="text"
id="focusedStyle_background"
/>
</div>
<div class="form-item">
<label for="focusedStyle_border_width">获得焦点时边框宽度</label>
<input
type="text"
id="focusedStyle_border_width"
/>
</div>
<div class="form-item">
<label for="focusedStyle_border_color">获得焦点时边框颜色</label>
<input
type="text"
id="focusedStyle_border_color"
/>
</div>
<div class="form-item">
<label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
<input
type="text"
id="focusedStyle_scale"
/>
</div>
<!-- <div class="form-actions">
<button

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

@ -29,6 +29,10 @@
rightId: '',
upId: '',
downId: '',
focusedStyle_background: '',
focusedStyle_border_width: '',
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
{
w: 2,
@ -48,6 +52,10 @@
rightId: '',
upId: '',
downId: '',
focusedStyle_background: '',
focusedStyle_border_width: '',
focusedStyle_border_color: '',
focusedStyle_scale: 1,
},
]);
@ -127,7 +135,11 @@
if (currentComponent && currentComponent.id === component.id) {
return;
}
// 清除之前选中组件的获取焦点后的样式
clearOldFocusStyle();
currentComponent = component;
// 设置当前选中组件的获取焦点后的样式
setCurrentFocusStyle();
// 右侧显示组件属性列表
if (!$('#props-panel').find('form').is(':visible')) {
$('#props-panel').find('.wait-box').hide();
@ -140,6 +152,32 @@
});
};
var clearOldFocusStyle = function () {
if (currentComponent) {
let el = $(currentComponent.el).find('.grid-stack-item-content');
el.css('background', '');
if (currentComponent.image) {
el.css('background', `url(${currentComponent.image}) no-repeat center center`).css('background-size', 'cover');
}
if (currentComponent.background) {
el.css('background', currentComponent.background);
}
el.css('border-color', '');
el.css('border-width', '');
el.css('transform', '');
}
};
var setCurrentFocusStyle = function () {
if (currentComponent) {
let el = $(currentComponent.el).find('.grid-stack-item-content');
el.css('background', currentComponent.focusedStyle_background);
el.css('border-color', currentComponent.focusedStyle_border_color);
el.css('border-width', currentComponent.focusedStyle_border_width + 'px');
el.css('transform', `scale(${currentComponent.focusedStyle_scale})`);
}
};
// 设置上下左右移动组件ID
var setMoveComponentId = function (component, self) {
const allComponents = self['grid'].save();
@ -233,28 +271,58 @@
form.find('#rightId').val(component.rightId);
form.find('#upId').val(component.upId);
form.find('#downId').val(component.downId);
form.find('#focusedStyle_background').val(component.focusedStyle_background);
form.find('#focusedStyle_border_width').val(component.focusedStyle_border_width);
form.find('#focusedStyle_border_color').val(component.focusedStyle_border_color);
form.find('#focusedStyle_scale').val(component.focusedStyle_scale);
};
// 定义组件设置配置策略
const componentStrategies = {
background: function (el, value) {
if (!value) {
el.find('.grid-stack-item-content').css('background', 'none');
} else {
el.find('.grid-stack-item-content').css('background', value);
}
},
image: function (el, value) {
if (!value) return;
el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
},
fontSize: function (el, value) {
if (!value) return;
el.find('span').css('font-size', value + 'px');
},
color: function (el, value) {
if (!value) return;
el.find('span').css('color', value);
},
text: function (el, value) {
if (!value) return;
el.find('span').text(value);
},
fontWeight: function (el, value) {
if (!value) return;
el.find('span').css('font-weight', value);
},
focusedStyle_background: function (el, value) {
if (!value) return;
el.find('.grid-stack-item-content').css('background', value);
},
focusedStyle_border_width: function (el, value) {
if (!value) return;
el.find('.grid-stack-item-content').css('border-width', value + 'px');
},
focusedStyle_border_color: function (el, value) {
if (!value) return;
el.find('.grid-stack-item-content').css('border-color', value);
},
focusedStyle_scale: function (el, value) {
if (!value) return;
el.find('.grid-stack-item-content').css('transform', `scale(${value})`);
},
};
// 设置当前传递组件的视图展示
@ -289,6 +357,10 @@
rightId: { event: 'change', property: 'rightId' },
upId: { event: 'change', property: 'upId' },
downId: { event: 'change', property: 'downId' },
focusedStyle_background: { event: 'blur', property: 'focusedStyle_background' },
focusedStyle_border_width: { event: 'blur', property: 'focusedStyle_border_width' },
focusedStyle_border_color: { event: 'blur', property: 'focusedStyle_border_color' },
focusedStyle_scale: { event: 'blur', property: 'focusedStyle_scale' },
};
// 统一绑定函数
@ -341,21 +413,18 @@
};
$('.save-container').click(function () {
// grid.addWidget({ w: 2, content: 'item 1' });
// console.log(grid.save());
// console.log(grid);
main.initData.children = main.grid.save();
welcome.initData.children = welcome.grid.save();
// welcome.initData.children = welcome.grid.save();
console.log(main.initData);
console.log(welcome.initData);
// console.log(welcome.initData);
localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
// localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
});
/** 执行方法 */
$(function () {
init('main', main);
init('welcome', welcome);
// init('welcome', welcome);
// 调用绑定
bindComponentEvents();
});

Write Preview
Loading…
Cancel
Save