[新增] form-item 组件

docs/docs/zh-CN/components/form.md

@@ -24,7 +24,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-input placeholder="请输入密码"></lay-input>
+  <lay-input placeholder="请输入密码" type="password"></lay-input>
 </template>
 
 <script>

src/index.ts

@@ -43,6 +43,7 @@ import LaySelect from './module/select/index'
 import LaySelectOption from './module/selectOption/index'
 import LayScroll from './module/scroll/index'
 import LayEmpty from './module/empty/index'
+import LayFormItem from './module/formItem/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -84,7 +85,8 @@ const components: Record<string, IDefineComponent> = {
   LaySelect,
   LayScroll,
   LaySelectOption,
-  LayEmpty
+  LayEmpty,
+  LayFormItem
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -140,6 +142,7 @@ export {
   LayScroll,
   LaySelectOption,
   LayEmpty,
+  LayFormItem,
   install,
 }
 

src/module/form/index.vue

@@ -1,9 +1,8 @@
 <template>
   <form class="layui-form">
-      <slot></slot>
+    <slot></slot>
   </form>
 </template>
 
 <script setup name="LayForm" lang="ts">
-
 </script>

src/module/formItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LayFormItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/formItem/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="layui-form-item">
+    <label class="layui-form-label">{{ label }}</label>
+    <div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup name="LayFormItem" lang="ts">
+import { defineProps, withDefaults } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    mode?: string
+    label?: string
+  }>(),
+  {
+    mode: 'block',
+  }
+)
+</script>