输入组件（baInput）

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

数组组件

属性

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

使用示例

vue

<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`
forceLocal	是否强制上传到本地存储	`boolean`	`false`
model-value / v-model	绑定值	`string/string[]`	—
hideImagePlusOnOverLimit	在上传数量达到限制时隐藏图片上传按钮	`boolean`	`false`

插槽/事件

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

使用示例

vue

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

        <FormItem
            label="头像"
            :input-attr="{
                hideSelectFile: true,
                onChange: onAvatarChange,
                onSuccess: onSuccess,
            }"
            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, UploadFiles } from 'element-plus'

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

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

const onSuccess = (res: ApiPromise, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    console.log(res)
}
</script>

富文本编辑器

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

公共属性

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

注意事项

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

使用示例

vue

<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`

使用示例

vue

<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	数据接口URL	`string`	—
params	请求下拉数据额外发送的参数	`anyObj`	`{}`
labelFormatter	渲染 `label` 前通过此函数格式化	`(optionData: anyObj, optionKey: string) => string`	—
tooltipParams	鼠标放置于选项上时，显示选项的更多字段信息而不只是 `label`	`anyObj`	`{}`
model-value / v-model	绑定值	`string/number/string[]/number[]`	—
escBlur	按下 `ESC` 键时直接使下拉框脱焦	`boolean`	`true`

远程下拉组件基于 el-select，所以它的大部分属性/事件也可以使用。

事件

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

属性详细解释

v-model

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

remoteUrl

远程下拉要请求的数据接口URL，组件将通过此接口获取数据，接口请至少返回 pk 和 field 字段
只要数据表生成过CRUD代码，它就会拥有控制器，远程下拉可直接使用控制器的查看（ index ）URL，比如 admin 表对应的控制器查看URL为 /admin/auth.admin/index

pk

远程下拉组件的 value 字段，通常直接使用数据源表的主键字段。
若控制器的 index 方法有关联表，pk 属性需要带有主表别名前缀；通常就是数据表对应的 模型名称，具体请参考下表示例：
表名模型路径及名称 pk 属性值
ba_user app/admin/model/User.php user.id
ba_user_group app/admin/model/UserGroup.php user_group.id
ba_user_group app/admin/model/user/Group.php group.id
可总结为：
1. 忽略目录结构：模型为 /user/Group.php 直接使用 group.id 即可
2. 小写下划线分割：模型名为 UserGroup.php 使用 user_group.id

表名	模型路径及名称	pk 属性值
ba_user	`app/admin/model/User.php`	`user.id`
ba_user_group	`app/admin/model/UserGroup.php`	`user_group.id`
ba_user_group	`app/admin/model/user/Group.php`	`group.id`

field

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

tooltipParams

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

使用示例

vue

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

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

        <FormItem
            label="remoteSelects"
            type="remoteSelects"
            v-model="state.remoteSelects"
            :input-attr="{
                pk: '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)
}

const onRemoteChange = () => {
    console.log('onRemoteChange')
}
</script>

省份城市选择器

属性

属性名	说明	类型	默认值
level	层级	`number`	`3`

`level` 属性详细解释

选择层级值，即：
1=省份 仅能选择省份
2=城市 可同时选择省份和城市
3=区域 可同时选择省份、城市、区域

使用示例

vue

<template>
    <div>
        <!-- 省份城市区域选择器 -->
        <FormItem
            label="城市"
            type="city"
            v-model="state.city1"
            :input-attr="{
                level: 3,
            }"
        />

        <!-- 仅省份的选择器 -->
        <FormItem
            label="城市"
            type="city"
            v-model="state.city2"
            :input-attr="{
                level: 1,
            }"
        />
    </div>
</template>

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

const state = reactive({
    city1: [],
    city2: [],
})
</script>

输入组件（baInput） ​

数组组件 ​

属性 ​

使用示例 ​

上传组件 ​

属性 ​

插槽/事件 ​

使用示例 ​

富文本编辑器 ​

公共属性 ​

注意事项 ​

使用示例 ​

字体图标选择器 ​

属性 ​

事件 ​

使用示例 ​

远程下拉组件 ​

属性 ​

事件 ​

属性详细解释 ​

v-model ​

remoteUrl ​

pk ​

field ​

tooltipParams ​

使用示例 ​

省份城市选择器 ​

属性 ​

level 属性详细解释 ​

使用示例 ​

输入组件（baInput）

数组组件

属性

使用示例

上传组件

属性

插槽/事件

使用示例

富文本编辑器

公共属性

注意事项

使用示例

字体图标选择器

属性

事件

使用示例

远程下拉组件

属性

事件

属性详细解释

v-model

remoteUrl

pk

field

tooltipParams

使用示例

省份城市选择器

属性

`level` 属性详细解释

使用示例