!313 feat(formItem): 新增tips属性

SpikeMeow · jevin98 · commit 4a9599203610 · 2024-05-06T09:54:45.000Z
* feat(component/formItem): formItem 增加一个 tips 属性，在表单的下方显示说明
diff --git a/docs/document-component/src/document/zh-CN/components/form.md b/docs/document-component/src/document/zh-CN/components/form.md
@@ -14,10 +14,10 @@
 
 <template>
   <lay-form :model="model">
-    <lay-form-item label="账户" prop="username">
+    <lay-form-item label="账户" prop="username" tips="账户是您的登录凭据，可以在注册电子邮件中找到">
       <lay-input v-model="model.username"></lay-input>
     </lay-form-item>
-    <lay-form-item label="密码" prop="password">
+    <lay-form-item label="密码" prop="password" tips="密码应当包含字母、数字和特殊符号中的任意两种">
       <lay-input v-model="model.password" type="password"></lay-input>
     </lay-form-item>
     <lay-form-item label="描述" prop="desc">
@@ -919,6 +919,7 @@ const submit10 = function(isValidate, model, errors) {
 | error-message          | 表单校验失败固定提示语                                                                 | `string`          | --                   | --      |
 | mode                   | 表单项显示的模式，`块元素` / `行元素`                                                  | `string`          | `block` `inline`     | `block` |
 | size                   | 尺寸                                    | --          | --    | -- |
+| tips | 表单项说明 | `string` | - | - |
 :::
 
 ::: title 表单项(form-item)方法
diff --git a/packages/component/src/component/form/index.less b/packages/component/src/component/form/index.less
@@ -143,6 +143,11 @@
 .layui-form-item {
   margin-bottom: 20px;
   clear: both;
+
+  .layui-form-tips {
+    color: #888;
+    font-size: 14px;
+  }
 }
 
 .layui-form-item.inline {
diff --git a/packages/component/src/component/formItem/index.vue b/packages/component/src/component/formItem/index.vue
@@ -29,6 +29,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<FormItemProps>(), {
   // mode: "block",
+  tips: "",
 });
 
 export type FormItemProps = _FormItemProps;
@@ -286,6 +287,9 @@ const getMarginLeft = computed(() => {
       <div ref="slotParent">
         <slot :props="{ ...props, model: layForm.model }"></slot>
       </div>
+      <span v-if="tips" class="layui-form-tips">
+        {{ tips }}
+      </span>
       <span
         v-if="errorStatus"
         :class="[
diff --git a/packages/component/src/component/formItem/types.ts b/packages/component/src/component/formItem/types.ts
@@ -11,4 +11,5 @@ export interface FormItemProps {
   required?: boolean;
   requiredErrorMessage?: string;
   size?: string;
+  tips?: string;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,5 @@ export interface FormItemProps {`
`11`	`11`	`required?: boolean;`
`12`	`12`	`requiredErrorMessage?: string;`
`13`	`13`	`size?: string;`
	`14`	`+ tips?: string;`
`14`	`15`	`}`