全局配置
安装 Avue 时传入全局默认值,页面再通过 option 覆盖。以下参数依据 3.9.5 的 src/index.ts 和组件源码整理;完整入口注册见快速上手。
注册配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import Avue from '@smallwei/avue'
import axios from 'axios'
import App from './App.vue'
import 'element-plus/dist/index.css'
import '@smallwei/avue/lib/index.css'
const request = axios.create({ baseURL: '/api', timeout: 15000 })
const app = createApp(App)
app.use(ElementPlus)
app.use(Avue, {
axios: request,
size: 'default',
appendToBody: true,
optionValidate: true,
crudOption: { border: true, index: true, rowKey: 'id' },
formOption: { labelWidth: 100, span: 12 }
})
app.mount('#app')传入的 axios 会成为组件使用的请求实例。字典请求内部会先读取响应的 res.data,再交给 dicFormatter,因此传入的实例应保留 Axios 的 { data: payload } 响应结构。如果业务实例已经通过拦截器直接返回 payload,请为 Avue 创建保留响应结构的独立实例,并复用必要的鉴权配置;不要指望 dicFormatter 恢复已经丢失的响应层级。
通用参数
| 参数 | 类型 | 默认值 | 用途 |
|---|---|---|---|
size | string | default | 默认尺寸,可选 large、default、small |
tableSize | string | 未设置 | 单独设置 CRUD 尺寸,优先于全局 size |
formSize | string | 未设置 | 单独设置 Form 尺寸,优先于全局 size |
calcHeight | number | 0 | CRUD 自动高度的额外扣减量,与页面 option.calcHeight 相加 |
menuType | string | text | CRUD 操作按钮类型,页面 option.menuType 优先,详见操作栏 |
crudOption | object | {} | CRUD 的默认 option |
formOption | object | {} | Form 的默认 option |
appendToBody | boolean | true | 被相关弹窗组件读取的挂载设置 |
optionValidate | boolean | true | 开启配置警告;不代替表单值校验,见配置校验 |
axios | 请求实例 | Avue 内置 Axios | 远程字典、上传等请求使用的实例 |
locale | string / object | zh-cn | 内置语言代码或语言对象 |
i18n | function | 未设置 | 自定义翻译函数,详见国际化 |
mini、medium 是旧版尺寸写法。当前 Form/CRUD 的尺寸优先级分别为:页面 option.size → 全局 formSize / tableSize → 全局 size。
页面如何覆盖默认值
Form 和 CRUD 对全局 formOption / crudOption 先深拷贝,再与页面配置做顶层合并。同名 column、group、嵌套对象会整体替换,不会自动拼接字段。
// 全局:crudOption: { border: true, index: true, rowKey: 'id' }
const option = {
index: false, // 本页不显示序号,border 和 rowKey 仍继承全局值
column: [{ label: '姓名', prop: 'name' }]
}要在多页复用列定义,可以显式展开公共配置或使用 deepClone 后再修改。不要依赖全局 column 与本页 column 自动合并。
云存储与上传水印
云存储配置会在上传组件的 oss 模式下使用,单个上传字段的同名配置优先于全局对象。配置按对象选择,不会把字段配置逐项补齐为全局值;详见上传组件。
| 配置 | 源码读取的主要字段 | 默认值 |
|---|---|---|
qiniu | AK、SK、scope、url、bucket、deadline | 字符串为空;bucket: 'https://upload.qiniup.com'、deadline: 1 |
ali | region、endpoint、stsToken、accessKeyId、accessKeySecret、bucket | 各字段为空字符串 |
cos | SecretId、SecretKey、Bucket、Region | 未设置,使用时传入完整配置 |
云存储 SDK 需要按功能加载,见组件与依赖索引。浏览器端配置会被访问页面的人读取,实际项目应使用服务端签发的临时凭证或服务端上传接口。
全局还保留 canvas 对象,默认字段如下:
const canvas = {
text: 'avuejs.com',
fontFamily: 'microsoft yahei',
color: '#999',
fontSize: 16,
opacity: 100,
bottom: 10,
right: 10,
ratio: 1
}当前上传组件在字段 canvasOption 非空时才调用图片水印处理;它不会自动读取全局 canvas。要复用配置,应显式传给上传字段:
const option = {
column: [{
label: '图片', prop: 'image', type: 'upload',
action: '/api/files',
canvasOption: { ...canvas }
}]
}这里处理的是上传图片。页面覆盖水印使用独立的 $Watermark 方法。
在组件中读取配置
Options API 可使用 this.$AVUE;Composition API 在 setup 中取得当前应用的全局属性:
import { getCurrentInstance } from 'vue'
const { appContext } = getCurrentInstance()
const avueConfig = appContext.config.globalProperties.$AVUE
console.log(avueConfig.size)$AVUE 是安装时写入的普通配置对象,修改它不保证触发所有已挂载组件重新计算。运行时需要切换尺寸、字段或显示状态时,优先更新页面的响应式 option。
