[新增] field 字段组件

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

@@ -0,0 +1,23 @@
+::: demo
+
+<template>
+  <lay-field title="标题">内容</lay-field>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+|  |  |  |
+|--|--|--|
+| title | 标题 | -- |

docs/docs/zh-CN/guide/install.md

@@ -1,3 +1,4 @@
+<br> 
 
 使用 npm 下载
 ```

docs/src/layouts/Layout.vue

@@ -82,6 +82,7 @@ export default {
       { id: 21, title: '手风琴',subTitle:"collapse" ,path: '/zh-CN/components/collapse' },
       { id: 22, title: '表格',subTitle:"table" ,path: '/zh-CN/components/table' },
       { id: 23, title: '头像',subTitle:"avatar" ,path: '/zh-CN/components/avatar' },
+      { id: 23, title: '字段',subTitle:"field" ,path: '/zh-CN/components/field' },
     ]
 
     const selected = ref(1)

docs/src/router/zh-CN.ts

@@ -121,6 +121,11 @@ const zhCN = [
         path: '/zh-CN/components/avatar',
         component: () => import('../../docs/zh-CN/components/avatar.md'),
         meta: { title: '头像' },
+      },
+      {
+        path: '/zh-CN/components/field',
+        component: () => import('../../docs/zh-CN/components/field.md'),
+        meta: { title: '字段' },
       }
     ],
   },

src/index.ts

@@ -38,6 +38,7 @@ import LayCheckbox from './module/checkbox/index'
 import LayForm from './module/form/index'
 import LayBreadcrumb from './module/breadcrumb/index'
 import LayBreadcrumbItem from './module/breadcrumbItem/index'
+import LayField from './module/field/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -74,7 +75,8 @@ const components: Record<string, IDefineComponent> = {
   LayForm,
   LayBreadcrumb,
   LayBreadcrumbItem,
-  LayAvatar
+  LayAvatar,
+  LayField
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -125,6 +127,7 @@ export {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
+  LayField,
   install,
 }
 

src/module/field/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 || 'LayField', Component)
+}
+
+export default Component as IDefineComponent

src/module/field/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <fieldset class="layui-elem-field">
+    <legend>{{title}}</legend>
+    <div class="layui-field-box">
+      <slot></slot>
+    </div>
+  </fieldset>
+</template>
+
+<script setup name="LayField" lang="ts">
+const props =
+  defineProps<{
+    title?: string
+  }>()
+</script>