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

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

@ -255,6 +255,56 @@
} }
}; };
// 颜色选择器统一处理
var initColorPicker = function (type, component) {
let options = {
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 = '';
}
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);
}
}
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[type]) {
options.color = component[type];
}
layui.colorpicker.render(options);
};
//将当前选中组件的属性显示在右侧列表中 //将当前选中组件的属性显示在右侧列表中
var setCurrentComponentProps = function (component) { var setCurrentComponentProps = function (component) {
// 设置标题 // 设置标题
@ -270,6 +320,7 @@
if (!isScreen(component.type)) { if (!isScreen(component.type)) {
form.find('#name').val(component.name); form.find('#name').val(component.name);
form.find('#image').parent().show();
} else { } else {
form.find('#name').parent().hide(); form.find('#name').parent().hide();
} }
@ -282,36 +333,7 @@
} }
if (component.hasOwnProperty('background')) { if (component.hasOwnProperty('background')) {
let options = { initColorPicker('background', component);
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);
form.find('#background').parent().show(); form.find('#background').parent().show();
} else { } else {
form.find('#background').parent().hide(); form.find('#background').parent().hide();
@ -320,7 +342,7 @@
if (component.type === 'text') { if (component.type === 'text') {
form.find('#text').val(component.text); form.find('#text').val(component.text);
form.find('#fontSize').val(component.fontSize); form.find('#fontSize').val(component.fontSize);
form.find('#color').val(component.color); initColorPicker('color', component);
form.find('#fontWeight').val(component.fontWeight); form.find('#fontWeight').val(component.fontWeight);
form.find('#text').parent().show(); form.find('#text').parent().show();
form.find('#fontSize').parent().show(); form.find('#fontSize').parent().show();
@ -342,9 +364,9 @@
form.find('#upId').val(component.upId); form.find('#upId').val(component.upId);
form.find('#downId').val(component.downId); 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_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('#focusedStyle_scale').val(component.focusedStyle_scale);
form.find('#eventsType').parent().show(); form.find('#eventsType').parent().show();
@ -376,37 +398,9 @@
// 定义组件设置配置策略 // 定义组件设置配置策略
const componentStrategies = { const componentStrategies = {
background: function (el, value, component) { background: function (el, value, component) {
let options = { initColorPicker('background', component);
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);
// 初始化的时候调用设置
if (!isScreen(component.type)) { if (!isScreen(component.type)) {
if (!value) { if (!value) {
el.find('.grid-stack-item-content').css('background', 'none'); el.find('.grid-stack-item-content').css('background', 'none');
@ -428,8 +422,8 @@
if (!value) return; if (!value) return;
el.find('span').css('font-size', value + 'px'); el.find('span').css('font-size', value + 'px');
}, },
color: function (el, value) { color: function (el, value, component) {
if (!value) return; initColorPicker('color', component);
el.find('span').css('color', value); el.find('span').css('color', value);
}, },
text: function (el, value) { text: function (el, value) {
@ -441,6 +435,7 @@
el.find('span').css('font-weight', value); el.find('span').css('font-weight', value);
}, },
focusedStyle_background: function (el, value, component) { focusedStyle_background: function (el, value, component) {
initColorPicker('focusedStyle_background', component);
if (!value) return; if (!value) return;
if (currentComponent && currentComponent.id === component.id) { if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('background', value); el.find('.grid-stack-item-content').css('background', value);
@ -453,6 +448,7 @@
} }
}, },
focusedStyle_border_color: function (el, value, component) { focusedStyle_border_color: function (el, value, component) {
initColorPicker('focusedStyle_border_color', component);
if (!value) return; if (!value) return;
if (currentComponent && currentComponent.id === component.id) { if (currentComponent && currentComponent.id === component.id) {
el.find('.grid-stack-item-content').css('border-color', value); el.find('.grid-stack-item-content').css('border-color', value);

Write Preview
Loading…
Cancel
Save