From 65d6d69570e16ee0920bf844cbae3743dc8ff201 Mon Sep 17 00:00:00 2001 From: lichaojun Date: Fri, 2 Jan 2026 13:26:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=96=E6=8B=BD=E5=B8=83=E5=B1=80-?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demoHtml/flex/index.html | 34 +--------- demoHtml/flex/js/index.js | 126 ++++++++++++++++++-------------------- 2 files changed, 64 insertions(+), 96 deletions(-) diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html index ebdb216..0324b89 100644 --- a/demoHtml/flex/index.html +++ b/demoHtml/flex/index.html @@ -127,10 +127,6 @@
-
@@ -142,10 +138,7 @@
- +
@@ -208,10 +201,7 @@
- +
@@ -222,10 +212,7 @@
- +
@@ -234,21 +221,6 @@ id="focusedStyle_scale" />
- - diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js index e902151..090c817 100644 --- a/demoHtml/flex/js/index.js +++ b/demoHtml/flex/js/index.js @@ -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) { // 设置标题 @@ -270,6 +320,7 @@ if (!isScreen(component.type)) { form.find('#name').val(component.name); + form.find('#image').parent().show(); } else { form.find('#name').parent().hide(); } @@ -282,36 +333,7 @@ } if (component.hasOwnProperty('background')) { - 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); 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);