38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
// layout：horizontal 标签在左（默认，可配 labelAlign / labelWidth）；vertical 标签在上
|
||
import { reactive } from 'vue'
|
||
import { G3Form, G3FormItem, G3Input, G3Space } from '@g3soft/ui'
|
||
|
||
const model = reactive({ name: '示例', desc: '' })
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space vertical :size="24" style="display: flex">
|
||
<!-- 横向：labelAlign="right" + 120px 定宽，右侧控件对齐 -->
|
||
<G3Form
|
||
:model="model"
|
||
layout="horizontal"
|
||
label-align="right"
|
||
:label-width="120"
|
||
style="max-width: 420px"
|
||
>
|
||
<G3FormItem name="name" label="项目名称">
|
||
<G3Input v-model="model.name" />
|
||
</G3FormItem>
|
||
<G3FormItem name="desc" label="项目描述" extra="最多 50 字">
|
||
<G3Input v-model="model.desc" />
|
||
</G3FormItem>
|
||
</G3Form>
|
||
|
||
<!-- 纵向：label 在上，适合狭窄容器 -->
|
||
<G3Form :model="model" layout="vertical" style="max-width: 420px">
|
||
<G3FormItem name="name" label="项目名称">
|
||
<G3Input v-model="model.name" />
|
||
</G3FormItem>
|
||
<G3FormItem name="desc" label="项目描述">
|
||
<G3Input v-model="model.desc" type="textarea" :rows="3" />
|
||
</G3FormItem>
|
||
</G3Form>
|
||
</G3Space>
|
||
</template>
|