u

code/g3soft-libs/docs/examples/form/basic.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// 最小可用表单：model 提供数据、FormItem 的 name 对应字段、rules 声明校验
+import { reactive } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Input, G3Message } from '@g3soft/ui'
+
+const model = reactive({ name: '' })
+
+const rules = {
+  name: [{ required: true }],
+}
+
+function onSubmit(values: Record<string, unknown>) {
+  G3Message.success(`提交成功：${JSON.stringify(values)}`)
+}
+</script>
+
+<template>
+  <G3Form :model="model" :rules="rules" :label-width="72" style="max-width: 360px" @submit="onSubmit">
+    <G3FormItem name="name" label="名称">
+      <G3Input v-model="model.name" placeholder="请输入名称" />
+    </G3FormItem>
+    <G3FormItem>
+      <G3Button html-type="submit">提交</G3Button>
+    </G3FormItem>
+  </G3Form>
+</template>