Fields - 表单项

Form 自带了一些表单项, 这些组件本质上是 Antd Form.Item 和 组件的结合。 可以把他们当成一个 Antd Form.Item 来使用，并且支持各种 props。 每个表单项都支持 fieldProps 属性来支持设置输入组件的 props。 支持了 placeholder 的透传，你可以直接在组件上设置 placeholder。

---

• Field 组件是 BaseField + Form.Item 的结合
• Field 的拓展组件可将 props 直接作用到 formItemProps，所以我们给 Field 拓展组件设置的 props 其实是 Antd Form.Item 的，fieldProps 才是组件的
• width 指的是输入框的宽度，不包括 label

基本用法

显示代码

import { defineComponent } from 'vue'
import { Date, Form, Number, DateRange, Select, Text, TextArea } from '@/components/form'

export default defineComponent({
    setup () {
        return () => {
            return (
                <Form>
                    <Form.Group>
                        <Text
                            width={'sm'}
                            label={'Text'}
                            name={'name'}
                            placeholder={'自定义 Placeholder'}
                        />
                        <Number
                            width={'sm'}
                            label={'Number'}
                            name={'number'}
                            required={true}
                        />
                    </Form.Group>
                    <Form.Group>
                        <Select
                            width={'xs'}
                            label={'Select'}
                            name={'select'}
                            valueEnum={{
                                '1': '选项一',
                                '2': '选项二'
                            }}
                        />
                        <Date
                            width={'xs'}
                            label={'Date'}
                            name={'date'}
                        />
                        <DateRange
                            width={'sm'}
                            label={'DateRange'}
                            name={'dateRange'}
                        />
                    </Form.Group>
                    <TextArea
                        width={'lg'}
                        label={'TextArea'}
                        name={'textarea'}
                    />
                </Form>
            )
        }
    }
})

API

通用的属性

属性	说明	类型	默认值
width	Field 的宽度，支持了一些枚举	number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
mode	组件模式	'read' | 'edit'	'edit'
text	显示文字 和 value 对称	any	-
placeholder	占位符	string	-
valueEnum	Select 的枚举值	object	-
colProps	开启 grid 模式并传递给 Antd Col	object	-
fieldProps	Antd 组件的 props	object	-
formItemProps	Form.Item 组件的 props	object	-

const SizeEnum = {
    xs: 104,
    sm: 216,
    md: 328,
    lg: 440,
    xl: 552
}