✨(component): 新增formItem 组件 新增label-width属性，用于控制宽度

package/component/src/component/formItem/index.vue

@@ -33,6 +33,7 @@ export interface LayFormItemProps {
   mode?: string;
   label?: string;
   labelPosition?: string;
+  labelWidth?: string | number;
   errorMessage?: string;
   rules?: Rule;
   required?: boolean;
@@ -41,6 +42,7 @@ export interface LayFormItemProps {
 const props = withDefaults(defineProps<LayFormItemProps>(), {
   mode: "block",
   labelPosition: "right",
+  labelWidth: 95
 });
 
 const layForm = inject("LayForm", {} as LayFormContext);
@@ -162,41 +164,40 @@ onMounted(() => {
     );
   }
 });
+
+const getMarginLeft = computed(() => {
+  if (props.mode === 'block') {
+    let labelWidth = typeof props.labelWidth === "string" ? parseFloat(props.labelWidth) : props.labelWidth;
+    labelWidth+=15;
+    return{
+      marginLeft:labelWidth+'px'
+    }
+  }
+})
 </script>
 
 <template>
-  <div
-    class="layui-form-item"
-    :class="[`layui-form-item-${labelPosition}`]"
-    ref="formItemRef"
-  >
-    <label class="layui-form-label">
-      <span
-        v-if="props.prop && isRequired"
-        :class="
-          ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
-        "
-      >
+  <div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef">
+    <label class="layui-form-label" :style="{ width: labelWidth + 'px' }">
+      <span v-if="props.prop && isRequired" :class="
+        ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
+      ">
         <slot name="required" :props="{ ...props, model: layForm.model }">{{
-          layForm.requiredIcons ? "" : "*"
+            layForm.requiredIcons ? "" : "*"
         }}</slot>
       </span>
       <slot name="label" :props="{ ...props, model: layForm.model }">
         {{ label }}
       </slot>
     </label>
-    <div :class="[mode ? 'layui-input-' + mode : '']">
+    <div :class="[mode ? 'layui-input-' + mode : '']" :style="getMarginLeft">
       <div ref="slotParent">
         <slot :props="{ ...props, model: layForm.model }"></slot>
       </div>
-      <span
-        v-if="errorStatus"
-        :class="[
-          'layui-error-message',
-          { 'layui-error-message-anim': errorStatus },
-        ]"
-        >{{ errorMsg }}</span
-      >
+      <span v-if="errorStatus" :class="[
+        'layui-error-message',
+        { 'layui-error-message-anim': errorStatus },
+      ]">{{ errorMsg }}</span>
     </div>
   </div>
 </template>