✨(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
+  <div class="layui-form-item" :class="[`layui-form-item-${labelPosition}`]" ref="formItemRef">
-    class="layui-form-item"
+    <label class="layui-form-label" :style="{ width: labelWidth + 'px' }">
-    :class="[`layui-form-item-${labelPosition}`]"
+      <span v-if="props.prop && isRequired" :class="
-    ref="formItemRef"
+        ['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
-  >
+      ">
-    <label class="layui-form-label">
-      <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
+      <span v-if="errorStatus" :class="[
-        v-if="errorStatus"
+        'layui-error-message',
-        :class="[
+        { 'layui-error-message-anim': errorStatus },
-          'layui-error-message',
+      ]">{{ errorMsg }}</span>
-          { 'layui-error-message-anim': errorStatus },
-        ]"
-        >{{ errorMsg }}</span
-      >
     </div>
   </div>
 </template>

package/document-component/src/document/zh-CN/components/form.md

@@ -532,6 +532,7 @@ export default {
 | prop          | 在表单绑定值(`model`)中字段`key`                                 | `string`  |        -       |    -    |
 | label         | 子项前边描述值，**尽量填写**，中文校验错误需要用到                 | `string`  |        -       |    -    |
 | label-position| 子项前边描述值的位置                                              | `string`  | `left` `top` `right` |`right` |
+| label-width   | 子项前边描述值的宽度                                              | `string` `number` | - | `95` |
 | required      | 是否必填                                                        | `boolean` | `true` `false` | `false` |
 | rules         |  表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator)  | `object` | - | - |
 | error-message | 表单校验失败固定提示语                                           | `string`  |`block` `inline`| `block` |

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -22,6 +22,7 @@
           <li>[修复] datePicker 组件 启用simple属性后无法弹出问题。 by @SmallWai</li> 
           <li>[修复] datePicker 组件 上一次更新带来的Bug。 by @SmallWai</li> 
           <li>[优化] radio 组件 动画效果。 by @SmallWai</li> 
+          <li>[优化] formItem 组件 新增label-width属性，用于控制宽度 by @SmallWai</li> 
         </ul>
       </li>
     </ul>