feat: 拖拽布局-页面实现动态反显

demoHtml/flex/css/index.css

@@ -41,6 +41,7 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
 }
 .component-item .grid-stack-item-content {
     width: 100%;

demoHtml/flex/index.html

@@ -6,7 +6,7 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0"
         />
-        <title>Page Builder</title>
+        <title>网页布局生成</title>
         <link
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -102,7 +102,7 @@
                             id="link"
                         />
                     </div>
-                    <div class="form-actions">
+                    <!-- <div class="form-actions">
                         <button
                             type="button"
                             class="save-button"
@@ -115,7 +115,7 @@
                         >
                             删除组件
                         </button>
-                    </div>
+                    </div> -->
                 </form>
             </div>
         </div>

demoHtml/flex/js/index.js

@@ -27,10 +27,10 @@
                 type: 'banner',
                 name: '我是轮播图',
                 fontSize: 14,
-                color: '#fff',
+                color: '#333',
-                background: 'red',
+                background: '#fff',
                 detail: '',
-                icon: 'fa-link',
+                icon: 'fa-image',
                 link: '',
             },
             { w: 2, h: 1 },
@@ -104,28 +104,68 @@
         form.find('#link').val(component.link);
     };
 
+    // 定义组件设置配置策略
+    const componentStrategies = {
+        name: function (el, value) {
+            el.find('span').text(value);
+        },
+        background: function (el, value) {
+            el.find('.grid-stack-item-content').css('background', value);
+        },
+        fontSize: function (el, value) {
+            el.find('span').css('font-size', value + 'px');
+        },
+        color: function (el, value) {
+            el.find('span').css('color', value);
+        },
+        icon: function (el, value) {
+            el.find('i').attr('class', `fas ${value}`);
+        },
+        // detail, link不需要反显页面所有不需要修改dom
+    };
+
     // 设置当前传递组件的视图展示
-    var setComponentView = function (component) {
+    var setComponentView = function (component, fields = null) {
         const el = $(component.el);
-        // 设置名称
+
-        if (component.name) {
+        // 确定要处理的属性
-            el.find('span').text(component.name);
+        const propsToHandle = fields || Object.keys(componentStrategies);
-        }
+
-        // 设置背景颜色
+        // 遍历并执行对应的策略
-        if (component.background) {
+        propsToHandle.forEach((prop) => {
-            el.find('.grid-stack-item-content').css('background', component.background);
+            if (componentStrategies[prop] && component[prop] !== undefined) {
-        }
+                componentStrategies[prop](el, component[prop]);
-        // 设置文字大小和颜色
+            }
-        if (component.fontSize) {
+        });
-            el.find('span').css('font-size', component.fontSize + 'px');
+    };
-        }
+
-        if (component.color) {
+    // 定义映射关系：元素ID -> 事件类型 -> 组件属性
-            el.find('span').css('color', component.color);
+    const elementMappings = {
-        }
+        name: { event: 'blur', property: 'name' },
-        // 设置图标
+        background: { event: 'blur', property: 'background' },
-        if (component.icon) {
+        fontSize: { event: 'blur', property: 'fontSize' },
-            el.find('i').attr('class', `fas ${component.icon}`);
+        color: { event: 'blur', property: 'color' },
-        }
+        icon: { event: 'blur', property: 'icon' },
+        detail: { event: 'blur', property: 'detail' },
+        link: { event: 'blur', property: 'link' },
+        // icon: { event: 'change', property: 'icon' }, // select使用change
+    };
+
+    // 统一绑定函数
+    var bindComponentEvents = function () {
+        Object.keys(elementMappings).forEach((elementId) => {
+            const mapping = elementMappings[elementId];
+            const $element = $('#' + elementId);
+
+            if ($element.length) {
+                // 组件名称添加失去焦点事件或者change事件
+                $element.off(mapping.event).on(mapping.event, function () {
+                    const value = $(this).val();
+                    currentComponent[mapping.property] = value;
+                    setComponentView(currentComponent, [mapping.property]);
+                });
+            }
+        });
     };
 
     $('.global-save-button').click(function () {
@@ -137,5 +177,7 @@
     /** 执行方法 */
     $(function () {
         init();
+        // 调用绑定
+        bindComponentEvents();
     });
 })();