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 6c58570853
commit 65d6d69570
2 changed files with 64 additions and 96 deletions
Show Stats Download Patch File Download Diff File

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

@ -127,10 +127,6 @@
</div>
<div class="form-item">
<label for="background">背景颜色</label>
<!-- <input
type="text"
id="background"
/> -->
<div id="background"></div>
</div>
<div class="form-item">
@ -142,10 +138,7 @@
</div>
<div class="form-item">
<label for="color">文字颜色</label>
<input
type="text"
id="color"
/>
<div id="color"></div>
</div>
<div class="form-item">
<label for="text">文字内容</label>
@ -208,10 +201,7 @@
</div>
<div class="form-item">
<label for="focusedStyle_background">获得焦点时背景颜色</label>
<input
type="text"
id="focusedStyle_background"
/>
<div id="focusedStyle_background"></div>
</div>
<div class="form-item">
<label for="focusedStyle_border_width">获得焦点时边框宽度</label>
@ -222,10 +212,7 @@
</div>
<div class="form-item">
<label for="focusedStyle_border_color">获得焦点时边框颜色</label>
<input
type="text"
id="focusedStyle_border_color"
/>
<div id="focusedStyle_border_color"></div>
</div>
<div class="form-item">
<label for="focusedStyle_scale">获得焦点时边框缩放大小</label>
@ -234,21 +221,6 @@
id="focusedStyle_scale"
/>
</div>
<!-- <div class="form-actions">
<button
type="button"
class="save-button"
>
保存组件
</button>
<button
type="button"
class="delete-button"
>
删除组件
</button>
</div> -->
</form>
</div>
</div>

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

@ -255,40 +255,17 @@
}
};
//将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) {
// 设置标题
$('#props-panel .panel-title span').text(isScreen(component.type) ? '画布属性' : '组件属性');
const form = $('#props-panel').find('form');
if (component.hasOwnProperty('childrenType')) {
form.find('#childrenType').val(component.childrenType);
form.find('#childrenType').parent().show();
} else {
form.find('#childrenType').parent().hide();
}
if (!isScreen(component.type)) {
form.find('#name').val(component.name);
} else {
form.find('#name').parent().hide();
}
if (component.hasOwnProperty('image')) {
form.find('#image').val(component.image);
form.find('#image').parent().show();
} else {
form.find('#image').parent().hide();
}
if (component.hasOwnProperty('background')) {
// 颜色选择器统一处理
var initColorPicker = function (type, component) {
let options = {
elem: '#background',
elem: `#${type}`,
alpha: true,
format: 'rgb',
done: function (color) {
const el = $(component.el);
let cptColor = rgbaToHex(color);
switch (type) {
case 'background':
component.background = cptColor;
if (isScreen(component.type)) {
component.image = '';
@ -306,12 +283,57 @@
el.find('.grid-stack-item-content').css('background', color);
}
}
break;
case 'color':
component.color = cptColor;
el.find('span').css('color', cptColor);
break;
case 'focusedStyle_background':
component.focusedStyle_background = cptColor;
el.find('.grid-stack-item-content').css('background', cptColor);
break;
case 'focusedStyle_border_color':
component.focusedStyle_border_color = cptColor;
el.find('.grid-stack-item-content').css('border-color', cptColor);
break;
}
},
};
if (component.background) {
options.color = component.background;
if (component[type]) {
options.color = component[type];
}
layui.colorpicker.render(options);
};
//将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) {
// 设置标题
$('#props-panel .panel-title span').text(isScreen(component.type) ? '画布属性' : '组件属性');
const form = $('#props-panel').find('form');
if (component.hasOwnProperty('childrenType')) {
form.find('#childrenType').val(component.childrenType);
form.find('#childrenType').parent().show();
} else {
form.find('#childrenType').parent().hide();
}
if (!isScreen(component.type)) {
form.find('#name').val(component.name);
form.find('#image').parent().show();
} else {
form.find('#name').parent().hide();
}
if (component.hasOwnProperty('image')) {
form.find('#image').val(component.image);
form.find('#image').parent().show();
} else {
form.find('#image').parent().hide();
}
if (component.hasOwnProperty('background')) {
initColorPicker('background', component);
form.find('#background').parent().show();
} else {
form.find('#background').parent().hide();
@ -320,7 +342,7 @@
if (component.type === 'text') {
form.find('#text').val(component.text);
form.find('#fontSize').val(component.fontSize);
form.find('#color').val(component.color);
initColorPicker('color', component);
form.find('#fontWeight').val(component.fontWeight);
form.find('#text').parent().show();
form.find('#fontSize').parent().show();
@ -342,9 +364,9 @@
form.find('#upId').val(component.upId);
form.find('#downId').val(component.downId);
form.find('#focusedStyle_background').val(component.focusedStyle_background);
initColorPicker('focusedStyle_background', component);
form.find('#focusedStyle_border_width').val(component.focusedStyle_border_width);
form.find('#focusedStyle_border_color').val(component.focusedStyle_border_color);
initColorPicker('focusedStyle_border_color', component);
form.find('#focusedStyle_scale').val(component.focusedStyle_scale);
form.find('#eventsType').parent().show();
@ -376,37 +398,9 @@
// 定义组件设置配置策略
const componentStrategies = {
background: function (el, value, component) {
let options = {
elem: '#background',
alpha: true,
format: 'rgb',
done: function (color) {
const el = $(component.el);
let cptColor = rgbaToHex(color);
component.background = cptColor;
if (isScreen(component.type)) {
component.image = '';
}
if (!cptColor) {
if (isScreen(component.type)) {
el.css('background', 'none');
} else {
el.find('.grid-stack-item-content').css('background', 'none');
}
} else {
if (isScreen(component.type)) {
el.css('background', color);
} else {
el.find('.grid-stack-item-content').css('background', color);
}
}
},
};
if (component.background) {
options.color = component.background;
}
layui.colorpicker.render(options);
initColorPicker('background', component);
// 初始化的时候调用设置
if (!isScreen(component.type)) {
if (!value) {
el.find('.grid-stack-item-content').css('background', 'none');
@ -428,8 +422,8 @@
if (!value) return;
el.find('span').css('font-size', value + 'px');
},
color: function (el, value) {
if (!value) return;
color: function (el, value, component) {
initColorPicker('color', component);
el.find('span').css('color', value);
},
text: function (el, value) {
@ -441,6 +435,7 @@
el.find('span').css('font-weight', value);
},
focusedStyle_background: function (el, value, component) {
initColorPicker('focusedStyle_background', component);
if (!value) return;
if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('background', value);
@ -453,6 +448,7 @@
}
},
focusedStyle_border_color: function (el, value, component) {
initColorPicker('focusedStyle_border_color', component);
if (!value) return;
if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('border-color', value);

Write Preview
Loading…
Cancel
Save