fix(ncform-theme-elementui): add inVLayout config to correct distance to label when in v layout

fix #69

STD-COMP.md

@@ -21,6 +21,7 @@ If you don't like the cold text description, click on the [interactive version](
 
 ```js
 {
+  inVLayout: false, // is in a vertical layout or not (when in a vertical layout, the distance to the label can be corrected by setting it to true)
   multiLine: false, // Whether to display multiple lines (if false, display with "..." when the content overflows, user can move the mouse up to display the complete content)
 }
 ```

STD-COMP_CN.md

@@ -21,6 +21,7 @@
 
 ```js
 {
+  inVLayout: false, // 是否处于垂直布局中（当处于垂直布局中时，通过设置为true可以修正与label的距离）
   multiLine: false, // 是否多行显示 （当为false时，内容溢出时用...显示，然后鼠标移上去可显示完整的内容）
 }
 ```

packages/ncform-theme-elementui/examples/control-comps/label.html

@@ -72,7 +72,10 @@
                 type: 'string',
                 default: 'ncform',
                 ui: {
-                  widget: 'label'
+                  widget: 'label',
+                  widgetConfig: {
+                    inVLayout: true
+                  }
                 }
               }
             }
@@ -120,6 +123,11 @@
                   }
                 }
               }
+            },
+            ui: {
+              widgetConfig: {
+                layout: 'h'
+              }
             }
           }
         }

packages/ncform-theme-elementui/src/components/control-comps/label.vue

@@ -1,6 +1,7 @@
 <template>
   <label :title="mergeConfig.multiLine ? '' : val"
     ref="label"
+    :style="{'margin-top': mergeConfig.inVLayout ? 0 : '9px'}"
     :class="['ncform-label', mergeConfig.multiLine ? 'multi-line' : '']"
   >{{val}}</label>
 </template>
@@ -10,7 +11,6 @@
     font-size: 14px;
 
     &:not(.multi-line) {
-      line-height: 40px;
       text-overflow:ellipsis;
       overflow:hidden;
       white-space:nowrap;
@@ -37,7 +37,8 @@
       return {
         // 组件特有的配置属性
         defaultConfig: {
-          multiLine: false // 是否多行显示 （当为false时，内容溢出时用...显示，然后鼠标移上去可显示完整的内容）
+          multiLine: false, // 是否多行显示 （当为false时，内容溢出时用...显示，然后鼠标移上去可显示完整的内容）
+          inVLayout: false, // 是否处于垂直布局中
         },
         val: '',
         // modelVal：请使用该值来绑定实际的组件的model