feat(form): add form-item slot label #1361

src/packages/__VUE/form/doc.en-US.md

@@ -362,12 +362,27 @@ setup(){
 
 Use the `rules` attribute of FormItem to define verification rules. The optional attributes are as follows:
 
-| Attribute | Default                            | Type                                          |
-|-----------|------------------------------------|-----------------------------------------------|
-| required  | Is it a required field             | boolean                                       |
-| message   | Error prompt copy                  | string                                        |
+| Attribute | Default                            | Type                                    |
+|-----------|------------------------------------|-----------------------------------------|
+| required  | Is it a required field             | boolean                                 |
+| message   | Error prompt copy                  | string                                  |
 | validator | Verification by function           | (value) => boolean \| string \| Promise |
-| regex     | Verification by regular expression | RegExp                                        |
+| regex     | Verification by regular expression | RegExp                                  |
+
+## FormItem Slots
+
+| Name            | Description         |
+|-----------------|---------------------|
+| default         | Default slot        |
+| label `v3.1.22` | Custom `label` slot |
+
+
+``` html
+  use slot
+  <nut-form-item>
+    <template v-slot:label>slot label</template>
+  </nut-form-item>
+```
 
 ### Methods
 

src/packages/__VUE/form/doc.md

@@ -362,12 +362,27 @@ setup(){
 
 使用 FormItem 的`rules`属性可以定义校验规则，可选属性如下:
 
-| 键名      | 说明                   | 类型                                          |
-|-----------|------------------------|-----------------------------------------------|
-| required  | 是否为必选字段         | boolean                                       |
-| message   | 错误提示文案           | string                                        |
+| 键名      | 说明                   | 类型                                    |
+|-----------|------------------------|-----------------------------------------|
+| required  | 是否为必选字段         | boolean                                 |
+| message   | 错误提示文案           | string                                  |
 | validator | 通过函数进行校验       | (value) => boolean \| string \| Promise |
-| regex     | 通过正则表达式进行校验 | RegExp                                        |
+| regex     | 通过正则表达式进行校验 | RegExp                                  |
+
+## FormItem Slots
+
+| 名称            | 说明              |
+|-----------------|-------------------|
+| default         | 自定义内容        |
+| label `v3.1.22` | 自定义`label`区域 |
+
+
+``` html
+  插槽使用方式
+  <nut-form-item>
+    <template v-slot:label>slot label</template>
+  </nut-form-item>
+```
 
 ### Methods
 

src/packages/__VUE/formitem/index.vue

@@ -5,8 +5,10 @@
     :style="$attrs.style"
   >
     <view class="nut-cell__title nut-form-item__label" :style="labelStyle" v-if="label" :class="{ required: required }">
-      {{ label }}</view
-    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </view>
     <view class="nut-cell__value nut-form-item__body">
       <view class="nut-form-item__body__slots" :style="bodyStyle">
         <slot></slot>
@@ -19,7 +21,7 @@
 </template>
 <script lang="ts">
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { computed, inject, provide, PropType, ref } from 'vue';
+import { computed, inject, provide, PropType, ref, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('form-item');
 export default create({
@@ -82,17 +84,17 @@ export default create({
       return {
         width: pxCheck(props.labelWidth),
         textAlign: props.labelAlign
-      };
+      } as CSSProperties;
     });
     const bodyStyle = computed(() => {
       return {
         textAlign: props.bodyAlign
-      };
+      } as CSSProperties;
     });
     const errorMessageStyle = computed(() => {
       return {
         textAlign: props.errorMessageAlign
-      };
+      } as CSSProperties;
     });
 
     return { parent, labelStyle, bodyStyle, errorMessageStyle };