34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
// FormGroup：在长表单里做「分组 + 组内独立列数」，组内覆盖组外布局
|
|
import { reactive } from 'vue'
|
|
import { G3Button, G3Form, G3FormGroup, G3FormItem, G3Input } from '@g3soft/ui'
|
|
|
|
const model = reactive({ host: '', port: '', username: '', password: '' })
|
|
</script>
|
|
|
|
<template>
|
|
<G3Form :model="model" layout="vertical" style="max-width: 620px" @submit="() => {}">
|
|
<G3FormGroup title="服务地址" :columns="2">
|
|
<G3FormItem name="host" label="主机">
|
|
<G3Input v-model="model.host" />
|
|
</G3FormItem>
|
|
<G3FormItem name="port" label="端口">
|
|
<G3Input v-model="model.port" type="number" />
|
|
</G3FormItem>
|
|
</G3FormGroup>
|
|
|
|
<G3FormGroup title="认证信息" :columns="2">
|
|
<G3FormItem name="username" label="账号">
|
|
<G3Input v-model="model.username" />
|
|
</G3FormItem>
|
|
<G3FormItem name="password" label="密码">
|
|
<G3Input v-model="model.password" type="password" />
|
|
</G3FormItem>
|
|
</G3FormGroup>
|
|
|
|
<G3FormItem>
|
|
<G3Button html-type="submit">连接</G3Button>
|
|
</G3FormItem>
|
|
</G3Form>
|
|
</template>
|