1. 拖拽项支持宽度设置

pagedesign · Jun 13, 2019 · f2f6788 · f2f6788
1 parent d9a65b1
commit f2f6788
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git a/lib/panels/DesignPanel/PreviewItem.js b/lib/panels/DesignPanel/PreviewItem.js
@@ -242,7 +242,11 @@ function (_React$Component) {
           "droppable": isOver,
           "dragging": isDragging // "drop-tips": canDrop,
 
-        })
+        }),
+        style: {
+          display: 'inline-block',
+          width: item.width || '100%'
+        }
       }, placeholderPosition === 'top' && isOver && !isSortMode ? _react["default"].createElement(widget.PlaceholderPreview, null) : null, _react["default"].createElement("div", {
         ref: connectDragSource,
         className: (0, _classnames["default"])({

diff --git a/lib/style/index.css b/lib/style/index.css
@@ -65,7 +65,7 @@
     padding: 10px 0;
     background: #efefef; }
     .csos-form-designer-container .design-panel .design-layout-container {
-      width: 350px;
+      width: 800px;
       height: 600px;
       padding-bottom: 60px;
       margin: 0 auto;
@@ -179,7 +179,9 @@
     width: 300px;
     padding: 10px;
     background: #fff;
-    border-left: 1px solid #dedee4; }
+    border-left: 1px solid #dedee4;
+    overflow: auto;
+    font-size: 14px; }
 
 .design-property-field {
   margin-bottom: 15px; }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "form-design-core",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "表单设计器",
     "main": "lib/index.js",
     "scripts": {

diff --git a/src/panels/DesignPanel/PreviewItem.js b/src/panels/DesignPanel/PreviewItem.js
@@ -187,12 +187,20 @@ class WidgetPreviewItem extends React.Component {
         // const items = layout.getLayoutChildren(data.id);
 
         return connectDropTarget(
-            <div className={cx({
-                "widget-preview-item-wrapper": true,
-                "droppable": isOver,
-                "dragging": isDragging,
-                // "drop-tips": canDrop,
-            })}>
+            <div
+                className={cx({
+                    "widget-preview-item-wrapper": true,
+                    "droppable": isOver,
+                    "dragging": isDragging,
+                    // "drop-tips": canDrop,
+                })}
+
+                style={{
+                    display: 'inline-block',
+                    width: item.width || '100%'
+                }}
+
+            >
                 {placeholderPosition === 'top' && isOver && !isSortMode ? <widget.PlaceholderPreview /> : null}
                 <div
                     ref={connectDragSource}

diff --git a/src/style/index.scss b/src/style/index.scss
@@ -96,7 +96,7 @@
         background: #efefef;
 
         .design-layout-container {
-            width: 350px;
+            width: 800px;
             height: 600px;
             padding-bottom: 60px;
             margin: 0 auto;
@@ -243,6 +243,8 @@
         padding: 10px;
         background: #fff;
         border-left: 1px solid rgb(222, 222, 228);
+        overflow: auto;
+        font-size: 14px;
     }
 }