27 lines
806 B
Vue
27 lines
806 B
Vue
<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>
|