feat: 增加文本行高和自动换行

src/components/customElement/node/index.vue

@@ -15,7 +15,6 @@
     margin: 0;
     width: 100%;
     height: 100%;
-    line-height: 1;
   }
 }
 </style>

src/utils/common.js

@@ -297,6 +297,16 @@ export const styles = {
 			// 如果是label类型，把fillColor转换为color
 			cmpSelfProps.color = cmpSelfProps.fillColor;
 			delete cmpSelfProps.fillColor;
+			if (!onlyOpera) {
+				if (cmpSelfProps.lineType === 'single') {
+					// word-break: keep-all;white-space: nowrap;
+					cmpSelfProps.wordBreak = 'keep-all';
+					cmpSelfProps.whiteSpace = 'nowrap';
+				} else {
+					cmpSelfProps.wordBreak = 'break-all';
+					cmpSelfProps.whiteSpace = 'normal';
+				}
+			}
 		}
 
 		// console.log('cmpSelfProps after inherit ', cmpSelfProps);
@@ -314,10 +324,12 @@ export const styles = {
 			result += 'border-radius: 50%;'
 		}
 
-		if (component.type === 'label' && !onlyOpera) {
+		// if (component.type === 'label' && !onlyOpera) {
 			// 如果是label类型，禁止自动换行
-			result += 'word-break: keep-all;white-space: nowrap;'
-		}
+			// console.log('cmpSelfProps', cmpSelfProps);
+			
+			// result += 'word-break: keep-all;white-space: nowrap;'
+		// }
 
 		// console.log('getComponentStyle',component.name, result);
 		return result;

src/utils/properties.js

@@ -131,7 +131,7 @@ export default {
     groupName: '文本',
     text: {
       title: '文本内容',
-      type: 'input',
+      type: 'textArea',
       value: ''
     },
     fillColor: {
@@ -139,6 +139,15 @@ export default {
       type: 'colorPicker',
       value: '#000'
     },
+    lineType: {
+      title: '自动换行',
+      type: 'select',
+      options: [
+        { label: '单行', value: 'single' },
+        { label: '多行', value: 'multi' }
+      ],
+      value: 'single'
+    },
     size: {
       title: '字体大小',
       type: 'swSelect',
@@ -147,6 +156,11 @@ export default {
       },
       value: 12
     },
+    lineHeight: {
+      title: '行高',
+      type: 'inputNumber',
+      value: 1
+    },
     textAlign: {
       title: '文本对齐',
       type: 'select',

src/views/Editor/Inspector/PropsTab.vue

@@ -95,6 +95,16 @@ const componentMapper = {
       'controls-position': 'right'
     }
   },
+  textArea: {
+    component: 'el-input',
+    props: {
+      type: 'textarea',
+      autosize: {
+        minRows: 3,
+        maxRows: 10
+      }
+    }
+  },
   input: {
     component: 'el-input'
   },