第八章：内置组件
第八章：内置组件
介绍
封装了一些常见组件，并且这些组件在初始化的时候已经自动加载，可以直接使用
sa-chart
基于vue-echarts封装的图表组件，vue-echarts是基于echarts封装的Vue图表组件，使用起来更加简单，可以参考vue-echarts
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| option | Object | 图表配置项,类似ecahrts配置项 | |
| autoResize | Boolean | 是否自动调整大小 | True |
| height | String | 图表高度 | '100%' |
| width | String | 图表宽度 | '100%' |
sa-checkbox
基于a-checkbox-group的封装，通过dict传递字典数据即可使用
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| dict | String | 字典名称 | |
| direction | String | 方向(水平 'horizontal',垂直 'vertical') | 'horizontal' |
| disabled | Boolean | 是否禁用 | False |
sa-radio 【5.x更新】
基于a-radio-group的封装，通过dict传递字典数据即可使用
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| dict | String | 字典名称 | |
| type | String | 单选框组的类型'radio','button' | 'radio' |
| direction | String | 方向(水平 'horizontal',垂直 'vertical') | 'horizontal' |
| disabled | Boolean | 是否禁用 | False |
| allowNull | Boolean | 是否增加一个空选项 | False |
| nullValue | [String, Number] | null的value | '' |
| nullLabel | String | null的label | '全部' |
sa-resource-button
通过sa-resource-button 点击 会打开sa-resource资源选择器
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| multiple | Boolean | 是否多选 | True |
| onlyData | Boolean | 是否只选择资源地址 | True |
| width | Number | 资源选择器宽度 | 1080 |
sa-select
基于a-select的封装，通过dict传递字典数据即可使用
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| dict | String | 字典名称 | |
| fieldNames | Object | 自定义 SelectOptionData 中的字段 | value: 'value', label: 'label' |
| style | Object | 自定义样式 | |
| placeholder | String | 选择框提示内容 | '请选择' |
| size | String | 选择框大小('mini','small','medium','large') | 'medium' |
| disabled | Boolean | 是否禁用 | False |
| allowClear | Boolean | 是否允许清除 | True |
sa-switch
基于a-switch的封装，默认'启用'为'1', '禁用'为'2'，如果需要其他封装，请直接使用a-switch
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| type | String | 开关类型('circle', 'round', 'line') | 'round' |
| checkedValue | String | 选中值 | '1' |
| uncheckedValue | String | 未选中值 | '2' |
| checkedText | String | 选中文字 | '启用' |
| uncheckedText | String | 未选中文字 | '禁用' |
sa-treeSlider
基于a-tree的封装，集展示、搜索、展开、折叠于一体
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | Array | 绑定值 | |
| data | Array | 数据源 | |
| fieldNames | Object | 自定义 OptionData 中的字段 | value: 'value', label: 'label' |
| icon | String | 树的图标 | |
| searchPlaceholder | String | 输入框提示内容 | |
| border | Boolean | 是否显示边框 | True |
sa-upload-image
封装的图片上传组件，使用简单
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| rounded | Boolean | 是否圆角 | False |
| title | String | 默认上传文字 | '本地上传' |
| icon | String | 默认上传按钮 | 'icon-plus' |
| tip | String | 上传提示文字 | |
| size | Number | 大小限制(byte) | 4 * 1024 * 1024 |
| accept | String | 允许选择的文件类型 | '.jpg,jpeg,.gif,.png,.svg,.bpm' |
| disabled | Boolean | 是否禁用 | False |
| multiple | Boolean | 是否多选 | False |
| mode | String | 上传模式，local强制本地上传('local','system') | 'system' |
| limit | Number | 多选模式，上传数量限制 | 0 |
sa-upload-file
封装的文件上传组件，使用简单
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| showList | Boolean | 是否显示文件列表 | True |
| draggable | Boolean | 是否允许拖动上传 | False |
| title | String | 默认上传文字 | '本地上传' |
| icon | String | 默认上传按钮 | 'icon-plus' |
| tip | String | 上传提示文字 | |
| size | Number | 大小限制(byte) | 4 * 1024 * 1024 |
| accept | String | 允许选择的文件类型 | '*' |
| disabled | Boolean | 是否禁用 | False |
| multiple | Boolean | 是否多选 | False |
| mode | String | 上传模式，local强制本地上传('local','system') | 'system' |
| limit | Number | 多选模式，上传数量限制 | 0 |
sa-pick-image 【5.x更新 2025-09-09】
上传图片组件，通过资源选择器选择图片，支持单选和多选
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| multiple | Boolean | 是否多选 | False |
| limit | Number | 多选模式，上传数量限制 | 0 |
sa-user
封装的用户选择组件
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| isEcho | Boolean | 显示选择人员 | False |
| multiple | Boolean | 是否多选 | True |
| onlyId | Boolean | 仅获取选择用户id | True |
| text | String | 默认选择文字 | '选择用户' |
sa-dict 【5.x更新】
封装的根据字典value展示字典label的tag组件
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| dict | String | 字典名称 | |
| colors | Array | 自定义数组颜色 | |
| render | String | 支持以span和tag两种方式的渲染 | tag |
| options | Array | 数据源，优先级高于dict |
sa-icon
封装的图标展示组件，图标选择器
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| icon | String | 图标内容 | 支持arco图标和iconify图标 |
| size | Number | 图标大小 | 24 |
sa-icon-picker
图标选择组件，默认增加bootstrap的icon，可以手动输入iconify所有图标
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| preview | Boolean | 是否显示预览 | True |
ma-cityLinkage
mineadmin封装的插件，省市区选择器
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| type | String | 选择器类型('select','cascader') | 'select' |
| mode | String | 值类型('name','code') | 'name' |
ma-codeEditor 【按需引入】
mineadmin封装的插件，代码编辑器，由于体积较大，影响初始加载时间，所以需要按需引入。
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| defaultModelValue | String | 默认值 | |
| language | String | 默认语言 | 'javascript' |
| readonly | Boolean | 是否只读 | False |
| miniMap | Boolean | 是否显示右侧代码地图 | False |
| height | Number | 默认高度 | 400 |
ma-wagnEditor
mineadmin封装的插件，文本编辑器，基于wangEditor
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| height | Number | 默认高度 | 400 |
ma-verifyCode
mineadmin封装的插件，验证码
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| width | Number | 宽度 | 120 |
| height | Number | 高度 | 36 |
| size | Number | 字符数量 | 4 |
| pool | String | 字符 | 'abcdefghjkmnpqrstuvwxyz23456789' |
| showError | Boolean | 显示错误 | True |
ma-colorPicker
mineadmin封装的插件，颜色选择器
| 参数名 | 参数类型 | 说明 | 默认值 |
|---|---|---|---|
| modelValue | (Array,String) | 绑定值 | |
| placeholder | String | 提示内容 | '请选择颜色' |