# 输入组件（baInput）

除了element plus (opens new window)提供的各种输入组件外，BuildAdmin系统还内置了以下输入组件。

# 数组组件

# 属性

属性名	说明	类型	默认值
keyTitle	键名标题	`string`	键名
valueTitle	键值标题	`string`	键值
model-value / v-model	绑定值	`array`	—

# 使用示例

<template>
    <div>
        <FormItem label="array" type="array" v-model="state.array" />

        <FormItem
            label="array"
            type="array"
            v-model="state.array"
            :input-attr="{
                keyTitle: '名称',
                valueTitle: '位置',
            }"
        />
    </div>
</template>

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

const state = reactive({
    array: []
})
</script>

# 上传组件

上传组件内部是使用/@/api/common内的fileUpload函数完成上传请求的。

# 属性

属性名	说明	类型	默认值
type	类型	`'image' \| 'images' \| 'file' \| 'files'`	`image`
data	上传请求时的额外携带数据	`anyObj`	`{}`
returnFullUrl	上传成功返回文件绝对路径	`boolean`	`false`
hideSelectFile	是否隐藏附件选择器	`boolean`	`false`
attr	可自定义el-upload的其他属性	`UploadProps`	`{}`
forceLocal	是否强制上传到本地存储	`boolean`	`false`
model-value / v-model	绑定值	`string \| string[]`	—

# 插槽/事件

同el-upload，文档链接 (opens new window)
注意使用插槽时，您不能使用FormItem组件，而是直接导入上传组件本身使用import BaUpload from '/@/components/baInput/components/baUpload.vue'

# 使用示例

<template>
    <div>
        <FormItem label="头像" type="image" v-model="state.avatar" />

        <FormItem
            label="头像"
            :input-attr="{
                hideSelectFile: true,
                onChange: onAvatarChange,
            }"
            type="image"
            v-model="state.avatar"
            prop="avatar"
        />

        <FormItem label="文件组" type="files" v-model="state.files" />
    </div>
</template>

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

const state = reactive({
    avatar: '',
    files: ['a/b.txt', 'b/c.xls'],
})

const onAvatarChange = (uploadFile: UploadFile) => {
    console.log(uploadFile)
}
</script>

# 富文本编辑器

BuildAdmin >= v2.0.0实现了多富文本编辑器共存。
所有编辑器的代码位于 /@/components/mixins/editor 文件夹，一个文件为一种编辑器，文件名则为编辑器名称。

# 公共属性

属性名	说明	类型	默认值
editorType	编辑器类型(名称)	`string`	未安装任何编辑器取`default`，安装后取第一个编辑器
model-value / v-model	绑定值	`string`	—

# 注意事项

每个编辑器拥有的属性是不尽相同的，请直接参考/@/components/mixins/editor中的对应编辑器的props定义

# 使用示例

<FormItem label="编辑器" type="editor" v-model="state.editor" />

<!-- 使用 md 编辑器前，需要先于模块市场安装好 -->
<FormItem
    label="MarkDown"
    type="editor"
    v-model="state.editor"
    :input-attr="{
        editorType: 'md-v3',
    }"
/>

<!-- 使用 wang 编辑器前，需要先于模块市场安装好 -->
<FormItem
    label="wangEditor"
    type="editor"
    v-model="state.editor"
    :input-attr="{
        editorType: 'wang',
    }"
/>

# 字体图标选择器

# 属性

属性名	说明	类型	默认值
size	选择器自带输入框的大小	`'default' \| 'small' \| 'large'`	`default`
disabled	是否禁用	`boolean`	`false`
title	选择面板标题	`string`	`请选择图标`
type	要选择的图标类型（默认值）	`'ele' \| 'awe' \| 'ali' \| 'local'`	`ele`
placement	选择面板打开的方向	`top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end`	`bottom`
showIconName	是否显示图标名称	`boolean`	`false`
model-value / v-model	绑定值，当前选择的图标名称	`string`	—

# 事件

事件名	说明	类型
change	选择图标	(event: string) => void

# 使用示例

<template>
    <div>
        <FormItem label="选择图标" type="icon" v-model="state.icon" />

        <FormItem
            type="icon"
            label="选择图标"
            v-model="state.icon"
            :input-attr="{
                showIconName: true,
                onChange: onIconChange,
            }"
        />
    </div>
</template>

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

const state = reactive({
    icon: ''
})

const onIconChange = (val: string) => {
    console.log(val)
}
</script>

# 远程下拉组件

# 属性

属性名	说明	类型	默认值
pk	下拉`value`字段	`string`	`id`
field	下拉`label`字段	`string`	`name`
remoteUrl	远程API的URL，通常为控制器URL，将自动请求该URL的`index`方法	`string`	—
params	请求下拉数据时，额外发送的参数	`anyObj`	`{}`
multiple	是否多选	`boolean`	`false`
labelFormatter	可对`label`进行渲染前格式化的函数	`(optionData: anyObj, optionKey: string) => string`	—
tooltipParams	鼠标放置于选项上时，显示选项的更多字段信息而不只是`label`	`anyObj`	`{}`
model-value / v-model	绑定值	`string \| number \| string[] \| number[]`	—

# 事件

事件名	说明	类型
row	选项改变时，返回被选项的整行数据	(val: any) => void

# 属性详细解释

# model-value

双向绑定值，它具有string | string[]等多种类型，当multiple为true时，才应传递数组。

# remoteUrl

控制器的URL，比如admin表对应的控制器URL为/admin/auth.admin/index
只要数据表生成过CRUD代码，它就会拥有控制器，默认请求的是对应控制器的index方法（也就是后台查看请求的方法）

# pk

数据源表的主键，作为select选项的value。
若控制器的index方法有关联表，pk属性需要带有表名前缀，比如ba_user.id。

# field

作为select选项的label字段，只需确保此字段在数据表内存在即可。

# tooltipParams

假设选项label为name，则用户只可以看到name这一个字段的值供选择
此属性的存在解决以上问题，请想象您将鼠标置入一个选项之上时，旁边出现一个面板，面板上显示了该选项的id、mobile、nickname等属性
它使用一个object配置要显示的字段的键值对，键为字段标题，值为字段名，请确保字段在数据表内存在，详见下方示例。

# 使用示例

<template>
    <div>

        <!-- FormItem 中 type:remoteSelect=远程单选,remoteSelects=远程多选，无需额外设置 multiple 属性  -->

        <FormItem
            label="remoteSelect"
            type="remoteSelect"
            v-model="state.remoteSelect"
            :input-attr="{
                pk: 'ba_user.id',
                field: 'nickname',
                remoteUrl: '/admin/user.User/index',
                onRow: onRemoteSelectRow
            }"
            placeholder="点击选择远程数据-单选"
        />

        <FormItem
            label="remoteSelects"
            type="remoteSelects"
            v-model="state.remoteSelects"
            :input-attr="{
                pk: 'ba_user.id',
                field: 'nickname',
                remoteUrl: '/admin/user.User/index',
                placeholder: '点击选择远程数据-多选',
                tooltipParams: {
                    '联系人昵称': 'nickname',
                    '交易地址': 'address',
                    '联系人电话': 'phone',
                }
            }"
        />
    </div>
</template>

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

const state = reactive({
    remoteSelect: '',
    remoteSelects: ['1'],
})

const onRemoteSelectRow = (rowData: any) => {
    console.log(rowData)
}
</script>

← 表单项目组件（formItem）表格组件（table） →