Form 表单

表单主要提供统一的格式和表单的布局，可以通过设置表单的属性，统一表单内元素的样式

基础用法

vue

<template> <ap-form labelWidth="100"> <ap-form-item label="姓名" required style="color: red"> <ap-input v-model="form.name" /> </ap-form-item> <ap-form-item label="手机号"> <ap-input v-model="form.phone" /> </ap-form-item> <ap-form-item label="喜欢的运动"> <ap-checkbox v-model="form.enjoy_game" value="running">跑步</ap-checkbox> <ap-checkbox v-model="form.enjoy_game" value="swimming">游泳</ap-checkbox> <ap-checkbox v-model="form.enjoy_game" value="basketball" >篮球</ap-checkbox > </ap-form-item> <ap-form-item label="性别"> <ap-radio-group v-model="form.gender"> <ap-radio :value="0">男</ap-radio> <ap-radio :value="1">女</ap-radio> </ap-radio-group> </ap-form-item> <ap-form-item label="其他信息"> <ap-input v-model="form.other" :rows="1" type="textarea"></ap-input> </ap-form-item> <ap-form-item label="最喜欢的水果"> <ap-select v-model="form.fav_fruit"> <ap-option :value="1">苹果</ap-option> <ap-option :value="2">香蕉</ap-option> </ap-select> </ap-form-item> </ap-form> </template> <script lang="ts" setup> import { reactive } from 'vue' const form = reactive({ name: '', phone: 0, enjoy_game: [], secret: false, gender: 0, other: '', fav_fruit: 1, }) </script>

显示代码

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性,可以让表单域变为行内的表单域。

vue

<template> <ap-form inline> <ap-form-item label="姓名"> <ap-input v-model="form.name" /> </ap-form-item> <ap-form-item label="手机号"> <ap-input v-model="form.phone" /> </ap-form-item> <ap-form-item> <ap-button primary>确认</ap-button> </ap-form-item> </ap-form> </template> <script lang="ts" setup> import { reactive } from 'vue' const form = reactive({ name: '', phone: '', }) </script>

显示代码

对齐方式

根据你们的设计情况，来选择最佳的标签对齐方式。

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部

vue

<template> <div> <div style="margin-bottom: 12px"> <ap-button @click="changeAlign('left')">label 左对齐</ap-button> <ap-button @click="changeAlign('top')">label 位于上方</ap-button> <ap-button @click="changeAlign('right')">label 右对齐</ap-button> </div> <ap-form :label-position="align"> <ap-form-item label="姓名"> <ap-input v-model="form.name" /> </ap-form-item> <ap-form-item label="手机号"> <ap-input v-model="form.phone" /> </ap-form-item> <ap-form-item label="性别"> <ap-radio-group v-model="form.gender"> <ap-radio :value="0">男</ap-radio> <ap-radio :value="1">女</ap-radio> </ap-radio-group> </ap-form-item> </ap-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import { FormPosition } from 'apathia-ui' const form = reactive({ name: '', phone: '', gender: 0, }) const align = ref<FormPosition>('left') const changeAlign = item => { align.value = item } </script>

显示代码

props

Form props

Form 组件可以设置一些属性，这些属性会影响到 Form 组件下所有的表单

name	类型	是否必传	说明	默认值
disabled	boolean	否	disabled 所有表单输入	undefined
inline	boolean	否	inline 模式所有的 FormItem 将在一行	false
labelWidth	number/string	否	label 的宽度，传数字自动加 px	80
labelPosition	'left', 'right', 'top'	否	控制FormItemlabel 的位置	'left'
labelAlign	'top' | 'center' | 'bottom'	否	FormItem 里 label 的垂直方向的对齐	'top'

FormItem props

如果FormItem 中声明了和 Form同样的 props，将会覆盖 Form 的 props

name	类型	是否必传	说明	默认值
prop	string	否	用来做表单校验(待完善)	undefined
required	boolean	否	是否必填	false
offset	boolean	否	在 label 为空时，labelPosition 不为 top 时 label 占用的宽度	false
labelWidth	number/string	否	label 的宽度，传数字自动加 px	80
inline	boolean	否	inline 模式所有的 FormItem 将在一行	false
labelPosition	'left', 'right', 'top'	否	控制FormItemlabel 的位置	'left'
contentClass	string	否	设置 FormItem 除了 label 之外的容器的 class	''
labelAlign	'top' | 'center' | 'bottom'	否	FormItem 里 label 的垂直方向的对齐	'top'

FormItem 的 labelWidth, inline, labelPosition可以覆盖Form的配置

TIP

如果在 Form 上设置了 disabled = true属性，使用 Form下面的所有 apathia 表单（如 Input, Checkbox)都会被 disabled， 除非你在 表单组件上设置 disabled 属性，默认表单组件的 props 优先级高于 form

<form disabled>
  <FormItem>
    <input :disabled="false" />
    <!-- won't be disabled -->
  </FormItem>

  <FormItem>
    <input />
    <!-- will be disabled -->
  </FormItem>
</form>

slots

插槽名称	说明	参数
default	显示内容	-
label	内容 label，如果提供，将会覆盖 label prop	-