feat: 拖拽布局-当前选中焦点设置

demoHtml/flex/css/index.css

@@ -72,7 +72,7 @@ html {
 
 .component-item {
     width: calc(50% - 5px);
-    height: 80px;
+    height: 120px;
     border-radius: 8px;
     cursor: pointer;
     display: flex;
@@ -109,6 +109,11 @@ html {
 .grid-stack-item span {
     font-size: 14px;
 }
+.image-container {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
 .action-btn {
     position: relative;
     width: 100%;

demoHtml/flex/index.html

@@ -38,7 +38,12 @@
                     </div>
                     <div class="components-list">
                         <div class="component-item grid-stack-item">
-                            <div class="grid-stack-item-content"><span>图片</span></div>
+                            <div class="grid-stack-item-content">
+                                <img
+                                    class="image-container default-image"
+                                    src="./image/img.png"
+                                />
+                            </div>
                         </div>
                         <div class="component-item grid-stack-item">
                             <div class="grid-stack-item-content"><span>文字</span></div>
@@ -97,6 +102,7 @@
                             <label for="image">背景图片</label>
                             <select id="image">
                                 <option value="">请选择</option>
+                                <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/movie.png">movie</option>
                                 <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/1.png">图片一</option>
                                 <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/2.jpg">图片二</option>
                                 <option value="https://mgt.xlzzslzy.top/demoHtml/flex/image/3.jpg">图片三</option>

demoHtml/flex/js/index.js

@@ -21,6 +21,7 @@
             h: 2,
             type: 'image',
             name: '图片',
+            background: '#fff',
             image: '',
             eventsType: 'click',
             eventsAction: '',
@@ -157,7 +158,7 @@
             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');
+                el.find('img').attr('src', currentComponent.image);
             }
             if (currentComponent.background) {
                 el.css('background', currentComponent.background);
@@ -171,7 +172,9 @@
     var setCurrentFocusStyle = function () {
         if (currentComponent) {
             let el = $(currentComponent.el).find('.grid-stack-item-content');
-            el.css('background', currentComponent.focusedStyle_background);
+            if (currentComponent.focusedStyle_background) {
+                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})`);
@@ -287,9 +290,10 @@
                 el.find('.grid-stack-item-content').css('background', value);
             }
         },
-        image: function (el, value) {
+        image: function (el, value, component) {
             if (!value) return;
-            el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
+            // el.find('.grid-stack-item-content').css('background', `url(${value}) no-repeat center center`).css('background-size', 'cover');
+            el.find('img').attr('src', value);
         },
         fontSize: function (el, value) {
             if (!value) return;
@@ -307,9 +311,11 @@
             if (!value) return;
             el.find('span').css('font-weight', value);
         },
-        focusedStyle_background: function (el, value) {
+        focusedStyle_background: function (el, value, component) {
             if (!value) return;
-            el.find('.grid-stack-item-content').css('background', value);
+            if (currentComponent && currentComponent.id === component.id) {
+                el.find('.grid-stack-item-content').css('background', value);
+            }
         },
         focusedStyle_border_width: function (el, value) {
             if (!value) return;
@@ -335,7 +341,7 @@
         // 遍历并执行对应的策略
         propsToHandle.forEach((prop) => {
             if (componentStrategies[prop] && component[prop] !== undefined) {
-                componentStrategies[prop](el, component[prop]);
+                componentStrategies[prop](el, component[prop], component);
             }
         });
     };