表单项目组件（formItem）

我们对表单输入组件进行了封装，以方便快速生成和制作表单。
本组件不同于 baInput，本组件是使用 el-form-item 内嵌了 baInput 实现的。

温馨提示

el-form 内可以同时存在 el-form-item、FormItem、ba-input 等输入组件，而且 FormItem 多数情况就是渲染的 el-form-item。

可用属性

本组件继承于 el-form-item，它的所有属性可以直接用于本组件。

属性名	注释
type	输入框类型(下面介绍的 类型 之一)，必填
v-model	双向绑定值，必填
inputAttr	输入框的附加属性，根据输入框类型，可以设置的附加属性不一样（如 string 类型使用了 el-input，则此处可以附加 el-input 的所有属性，同 baInput 的 attr）
blockHelp	块级输入帮助信息
tip	输入提示信息，功能类似 blockHelp，但渲染方式不同，可以传递 string 或 object，传递的 object 应为 el-tooltip 的属性列表
placeholder	输入框的 placeholder，相当于 inputAttr.placeholder 的别名
attr	v2.1.0 起 attr 可直接作为 props 传递，无需使用 props.attr 的语法，需要附加到内部 el-form-item 组件上的额外属性
data	v2.1.0 起 data 部分可直接使用 inputAttr 代替，额外数据，比如输入类型：单选框、复选框 的选项，城市选择器 的区域等级配置等

输入框类型

类型名	注释	内部输入组件，点击链接可查以上inputAttr可用属性
string	字符串	el-input
password	密码	el-input
number	数字	el-input，使用 v-model.number="val" 绑定值
radio	单选框组	el-radio-group 使用 inputAttr.border 和 inputAttr.button 可直接将更加内部的 el-radio 渲染为不同的样式，其他的 el-radio 属性需要使用 inputAttr.childrenAttr 修改，比如 inputAttr.childrenAttr.disabled
checkbox	复选框组	el-checkbox-group 使用 inputAttr.border 和 inputAttr.button 可直接将更加内部的 el-checkbox 渲染为不同的样式，其他的 el-checkbox 属性需要使用 inputAttr.childrenAttr 修改，比如 inputAttr.childrenAttr.disabled
switch	开关	el-switch
textarea	多行文本	el-input
array	数组	ba-array /@/components/baInput/components/array.vue
datetime	时间日期选择	el-date-picker
year	年份选择	el-date-picker
date	日期选择	el-date-picker
time	时间选择	el-time-picker
select	下拉选择框-单选	el-select
selects	下拉选择框-多选	el-select
remoteSelect	远程下拉选择框	ba-remote-select /@/components/baInput/components/remoteSelect.vue
editor	富文本编辑器	ba-editor /@/components/editor/index.vue
city	城市选择器	el-cascader
image	图片上传	ba-upload
images	图片上传-多图	ba-upload
file	文件上传	ba-upload
files	文件上传-多文件	ba-upload
icon	图标选择器	ba-icon-selector /@/components/baInput/components/iconSelector.vue参：字体图标选择器
color	颜色选择器	el-color-picker

示例代码

template

<template>
    <el-scrollbar height="96vh">
        <el-form class="form-box" :model="items" label-width="120px" label-position="right">
            
            <!-- 以下四种输入框使用了 el-input -->
            <!-- input-attr 属性演示了如何添加 el-input 组件原有的属性 -->
            <!-- size 和 label-width 属性演示了如何使用 el-form-item 原有的属性 -->
            <FormItem
                label="string"
                type="string"
                v-model="items.string"
                :input-attr="{
                    maxlength: 10,
                    clearable: true,
                    // 事件以on开头，并使用大写驼峰的事件名称定义
                    onChange: onChangeString,
                    // 若需使用 $event 可以用此语法，index 是可以额外为函数传递的参数
                    onChange: ($event: string) => onChangeString($event, index),
                }"
                size="large"
                label-width="120px"
                tip="我是输入提示文案"
                block-help="我也是输入提示文案，但使用了不同的渲染方式"
                placeholder="输入框的 placeholder，相当于 input-attr.placeholder 的别名"
            >
                <template #prefix>v2.1.2 起支持插槽，本 prefix 插槽是 el-input 组件的插槽</template>
            </FormItem>

            <FormItem
                label="password"
                type="password"
                v-model="items.password"
                :input-attr="{ maxlength: 10, clearable: true, showPassword: true }"
            />
            <FormItem label="number" type="number" v-model.number="items.number" :input-attr="{ clearable: true, size: 'large' }" />
            <FormItem label="textarea" type="textarea" v-model="items.textarea" :input-attr="{ showWordLimit: true, maxlength: 30, rows: 3 }" />

            <!-- 同时使用了 el-radio-group 和 el-radio -->
            <!-- 通过 data.content 配置了`选项`数据 -->
            <!-- 通过 attr 设置了el-radio-group 的 size 属性 -->
            <!-- 通过 data.childrenAttr 设置了 el-radio 的 border 属性 -->
            <FormItem
                label="radio"
                type="radio"
                v-model="items.radio"
                :input-attr="{ size: 'large' }"
                :data="{ childrenAttr: { border: true }, content: { a: '选项a', b: '选项b' } }"
            />

            <!-- 框架版本大于 v2.1.0 时，以上 radio 可以更简单，一股脑放到 input-attr 即可 -->
            <!-- 请注意 border 属性，它将被自动展开到 childrenAttr（属性附加给更内部的 el-radio），相似的还有一个 button 属性，可将 radio 渲染为按钮 -->
            <FormItem
                label="radio"
                type="radio"
                v-model="items.radio"
                :input-attr="{ size: 'large', border: true, content: { a: '选项a', b: '选项b' } }"
            />

            <!-- 同时使用了 el-checkbox-group 和 el-checkbox -->
            <!-- 本类型类似于 radio 只是它的绑定值是一个数组 -->
            <FormItem
                label="checkbox"
                type="checkbox"
                v-model="items.checkbox"
                :input-attr="{ size: 'large' }"
                :data="{ childrenAttr: { border: true }, content: { '0': '选项a', '1': '选项b' } }"
            />

            <!-- 框架版本大于 v2.1.0 时，以上 checkbox 可以更简单，一股脑放到 input-attr 即可 -->
            <FormItem
                label="checkbox"
                type="checkbox"
                v-model="items.checkbox"
                :input-attr="{ size: 'large', border: true, content: { '0': '选项a', '1': '选项b' } }"
            />

            <!-- 使用了 el-switch -->
            <FormItem label="switch" type="switch" v-model="items.switch" :input-attr="{ size: 'large' }" />

            <!-- 使用了自定义组件 /@/components/baInput/components/array.vue -->
            <FormItem label="array" type="array" v-model="items.array" />

            <!-- 以下三种输入框使用了 el-date-picker -->
            <FormItem label="datetime" type="datetime" v-model="items.datetime" />
            <FormItem label="year" type="year" v-model="items.year" />
            <FormItem label="date" type="date" v-model="items.date" />

            <!-- 使用了 el-time-picker -->
            <FormItem label="time" type="time" v-model="items.time" />

            <!-- 以下两种输入框使用了 el-select -->
            <FormItem label="select" type="select" v-model="items.select" :data="{ content: { '0': '选项0', '1': '选项1' } }" />
            <FormItem label="selects" type="selects" v-model="items.selects" :data="{ content: { '0': '选项0', '1': '选项1', '2': '选项2' } }" />

            <!-- 使用了自定义组件 /@/components/baInput/components/remoteSelect.vue -->
            <!-- 使用时，请确保pk(主键),field(字段),remote-url(api地址)配置正确 -->
            <FormItem
                label="remoteSelect"
                type="remoteSelect"
                v-model="items.remoteSelect"
                :input-attr="{
                    multiple: false,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': '/admin/user.User/index',
                }"
                placeholder="点击选择远程数据-单选"
            />
            <FormItem
                label="remoteSelect"
                type="remoteSelect"
                v-model="items.remoteSelects"
                :input-attr="{
                    multiple: true,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': '/admin/user.User/index',
                    placeholder: '点击选择远程数据-多选',
                }"
            />

            <!-- 使用了 el-cascader -->
            <FormItem label="city" type="city" v-model="items.city" />

            <!-- 以下四种输入框使用了 el-upload -->
            <!-- images 和 files 可以绑定数组类型的值 -->
            <FormItem label="image" type="image" v-model="items.image" />
            <FormItem label="images" type="images" v-model="items.images" />
            <FormItem label="file" type="file" v-model="items.file" />
            <FormItem label="files" type="files" v-model="items.files" />

            <!-- 使用了自定义组件 /@/components/editor/index.vue -->
            <FormItem label="editor" type="editor" v-model="items.editor" />

            <!-- 使用了自定义组件 /@/components/baInput/components/iconSelector.vue -->
            <!-- 具体使用请参考`字体图标` -->
            <FormItem label="icon" type="icon" v-model="items.icon" :input-attr="{ placement: 'top', 'show-icon-name': true }" />
        </el-form>
    </el-scrollbar>
</template>

script

<script setup lang="ts">
import { reactive } from 'vue'
import FormItem from '/@/components/formItem/index.vue'

const items = reactive({
    string: '',
    password: '',
    number: 1,
    textarea: '',
    radio: 'a',
    checkbox: ['0', '1'],
    switch: 1,
    array: [{ key: '这里是key', value: '这里是Value' }],
    datetime: '',
    year: '',
    date: '',
    time: '',
    select: '0',
    selects: ['0', '1'],
    remoteSelect: '1',
    remoteSelects: ['1'],
    editor: '<p>默认内容</p>',
    city: '',
    image: 'http://localhost:1818/src/assets/logo.png',
    images: 'http://localhost:1818/src/assets/logo.png',
    file: 'http://localhost:1818/src/assets/logo.png',
    files: 'http://localhost:1818/src/assets/logo.png',
    icon: 'el-icon-Apple',
})
</script>

style

<style scoped lang="scss">
.form-box {
    width: 80vw;
    height: 96vh;
    margin: 40px auto;
}
</style>