init

src/component/field/index.less

@@ -0,0 +1,32 @@
+:root {
+  --field-border-color: var(--global-neutral-color-3);
+  --field-border-radius: var(--global-border-radius);
+}
+
+.layui-field {
+  margin-bottom: 10px;
+  padding: 0;
+  border-width: 1px;
+  border-color: var(--field-border-color);
+  border-style: solid;
+}
+
+.layui-field legend {
+  margin-left: 20px;
+  padding: 0 10px;
+  font-size: 20px;
+  font-weight: 300;
+}
+
+.layui-field-title {
+  margin: 10px 0 20px;
+  border-width: 1px 0 0;
+}
+
+.layui-field-box {
+  padding: 15px;
+}
+
+.layui-field-title .layui-field-box {
+  padding: 10px 0;
+}

src/component/field/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/field/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+export default {
+  name: "LayField",
+};
+</script>
+
+<script setup lang="ts">
+import "./index.less";
+import { useSlots } from "vue";
+
+export interface FieldProps {
+  title?: string;
+}
+
+const slot = useSlots();
+const props = defineProps<FieldProps>();
+</script>
+
+<template>
+  <fieldset v-if="slot.default" class="layui-field">
+    <legend>{{ title }}</legend>
+    <div class="layui-field-box">
+      <slot></slot>
+    </div>
+  </fieldset>
+  <fieldset v-else class="layui-field layui-field-title">
+    <legend>
+      <a name="docend">{{ title }}</a>
+    </legend>
+  </fieldset>
+</template>