BuildAdmin

# 输入组件（baInput）

我们对表单输入组件进行了封装，以方便快速生成和制作表单。

温馨提示

本组件不等于FormItem，但本组件是FormItem的基础，类似于el-form-item和el-input的关系。

# 可用属性

属性名 注释
type 输入框类型(下面介绍的类型之一)，必填
v-model 双向绑定值，必填
attr 附加属性，根据输入框类型，可以设置的附加属性不一样（如string类型使用了el-input，则此处可以附加el-input的所有属性）
data 额外数据，比如输入类型：单选框、复选框的选项，城市选择器的区域等级配置等

# 输入框类型

类型名 注释 渲染组件
string 字符串 el-input
password 密码 el-input
number 数字 el-input，使用v-model.number="val"绑定值
radio 单选框 el-radio-group和el-radio
checkbox 复选框 el-checkbox-group和el-checkbox
switch 开关 el-switch
textarea 多行文本 el-input
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 远程下拉选择框 /@/components/baInput/components/remoteSelect.vue
editor 富文本编辑器 /@/components/editor/index.vue
city 城市选择器 el-cascader
image 图片上传 内部使用el-upload，但已封装了上传api等
images 图片上传-多图 el-upload
file 文件上传 el-upload
files 文件上传-多文件 el-upload
icon 图标选择器 /@/components/baInput/components/iconSelector.vue参：字体图标选择器 (opens new window)

# 示例代码

<template>
    <el-scrollbar height="96vh">
        <el-form class="form-box" :model="items" label-width="120px" label-position="right">
            
            <!-- 以下四种输入框使用了 el-input -->
            <!-- attr 属性演示了如何添加 el-input 组件原有的属性 -->
            <BaInput type="string" v-model="items.string" :attr="{
                maxlength: 10,
                clearable: true,
                onChange: onChangeString, // 事件以on开头，并使用大写驼峰的事件名称定义，不支持在此处单独传递$event（若需要请改用el-input）
            }" />
            <BaInput type="password" v-model="items.password" :attr="{ maxlength: 10, clearable: true, 'show-password': true }" />
            <BaInput type="number" v-model.number="items.number" :attr="{ clearable: true, size: 'large' }" />
            <BaInput type="textarea" v-model="items.textarea" :attr="{ 'show-word-limit': true, rows: 3 }" />

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

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

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

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

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

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

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

            <!-- 使用了自定义组件 /@/components/baInput/components/remoteSelect.vue -->
            <!-- 使用时，请确保pk(主键),field(字段),remote-url(api地址,通常为控制器的index方法即可)配置正确 -->
            <BaInput
                type="remoteSelect"
                v-model="items.remoteSelect"
                :attr="{
                    multiple: false,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': userUser + 'index',
                    placeholder: '点击选择远程数据-单选',
                }"
            />
            <BaInput
                type="remoteSelect"
                v-model="items.remoteSelects"
                :attr="{
                    multiple: true,
                    pk: 'user.id',
                    field: 'nickname',
                    'remote-url': userUser + 'index',
                    placeholder: '点击选择远程数据-多选',
                }"
            />

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

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

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

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

<script setup lang="ts">
import { reactive } from 'vue'
import BaInput from '/@/components/baInput/index.vue'
import { userUser } from '/@/api/controllerUrls'

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

← 表格组件（table） →