Form 表单
表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。
使用表单，您可以收集、验证和提交数据。
基础表单
最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。
在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。
基础用法
显示代码
vue
<template>
<div class="common-content form-content form-basic">
<ued-form :model="formBasic" label-width="auto" style="max-width: 600px">
<ued-form-item label="radio">
<ued-radio-group v-model="formBasic.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio-button">
<ued-radio-group v-model="formBasic.radioButton">
<ued-radio-button value="button1" />
<ued-radio-button value="button2" />
<ued-radio-button value="button3" />
</ued-radio-group>
</ued-form-item>
</ued-form>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const formBasic = reactive({
radio: 1,
radioButton: 'button1',
})
</script>禁用全部
使用disabled属性禁用表单，表单自身的禁用属性优先级高于Form的
禁用全部
显示代码
vue
<template>
<div class="common-content form-content form-disabled">
<ued-form :model="formDisabled" :disabled="true">
<ued-form-item label="radio">
<ued-radio-group v-model="formDisabled.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio-button">
<ued-radio-group v-model="formDisabled.radioButton">
<ued-radio-button value="button1" />
<ued-radio-button value="button2" />
<ued-radio-button value="button3" />
</ued-radio-group>
</ued-form-item>
</ued-form>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const formDisabled = reactive({
radio: 1,
radioButton: 'button1',
})
</script>行内表单
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
通过设置 inline 属性为 true 可以让表单域变为行内的表单域。
行内表单
显示代码
vue
<template>
<div class="common-content form-content form-inline">
<ued-form :model="formInline" label-width="auto" inline>
<ued-form-item label="radio">
<ued-radio-group v-model="formInline.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio">
<ued-radio-group v-model="formInline.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio-button">
<ued-radio-group v-model="formInline.radioButton">
<ued-radio-button value="button1" />
<ued-radio-button value="button2" />
<ued-radio-button value="button3" />
</ued-radio-group>
</ued-form-item>
</ued-form>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const formInline = reactive({
radio: 1,
radioButton: 'button1',
})
</script>对齐方式
通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left、right， 当设为 top 时标签会置于表单域的顶部
对齐方式
显示代码
vue
<template>
<div class="common-content form-content form-label-position">
<ued-radio-group v-model="labelPosition" aria-label="label position">
<ued-radio-button value="left">Left</ued-radio-button>
<ued-radio-button value="right">Right</ued-radio-button>
<ued-radio-button value="top">Top</ued-radio-button>
</ued-radio-group>
<ued-form
:model="formLabelPosition"
label-width="auto"
:label-position="labelPosition"
>
<ued-form-item label="radio">
<ued-radio-group v-model="formLabelPosition.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio-button">
<ued-radio-group v-model="formLabelPosition.radioButton">
<ued-radio-button value="button1" />
<ued-radio-button value="button2" />
<ued-radio-button value="button3" />
</ued-radio-group>
</ued-form-item>
</ued-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormPropsType } from '@ued-plus/components'
const labelPosition = ref<FormPropsType['labelPosition']>('right')
const formLabelPosition = reactive({
radio: 1,
radioButton: 'button1',
})
</script>尺寸控制
表单中的所有子组件都继承了该表单的 size 属性。 同样，form-item 也有一个 size 属性。
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可
表单大小
显示代码
vue
<template>
<div class="common-content form-content form-label-position">
<ued-radio-group v-model="size" aria-label="label position">
<ued-radio-button value="small">small</ued-radio-button>
<ued-radio-button value="default">default</ued-radio-button>
<ued-radio-button value="large">large</ued-radio-button>
</ued-radio-group>
<ued-form :model="formSize" label-width="auto" :size="size">
<ued-form-item label="radio">
<ued-radio-group v-model="formSize.radio">
<ued-radio :value="1" label="radio1" />
<ued-radio :value="2" label="radio2" />
</ued-radio-group>
</ued-form-item>
<ued-form-item label="radio-button">
<ued-radio-group v-model="formSize.radioButton">
<ued-radio-button value="button1" />
<ued-radio-button value="button2" />
<ued-radio-button value="button3" />
</ued-radio-group>
</ued-form-item>
</ued-form>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormPropsType } from '@ued-plus/components'
const size = ref<FormPropsType['size']>('default')
const formSize = reactive({
radio: 1,
radioButton: 'button1',
})
</script>Form API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model | 表单数据对象 | Record<string, any> | - |
| size | 尺寸 | large/default/small | - |
| inline | 行内表单模式 | boolean | false |
| label-position | 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性 | left/right/top | right |
| label-width | 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto | string/number | '' |
| disabled | 是否禁用该表单内的所有组件。 如果设置为 true, 它将设置内部组件的 disabled 属性 | boolean | false |
FormItem API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签文本 | string | - |