AvueAvue
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
首页
  • 开发指南
  • Skill开发
  • 在线测试工具
  • Form组件
  • Crud组件
  • Default组件
  • Data组件
  • Component组件
产品
工作台
授权
联系
2.x文档
个人支付接口
  • 介绍
  • 更新日志
  • 贡献指南
  • 快速上手
  • 组件与依赖索引
  • Skill 开发指南
  • TypeScript 使用
  • 全局配置
  • 国际化
  • 全局 API
  • Option 配置校验
  • 在线测试工具
  • 远程协助
  • 企业须知

全局配置

安装 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 恢复已经丢失的响应层级。

通用参数

参数类型默认值用途
sizestringdefault默认尺寸,可选 large、default、small
tableSizestring未设置单独设置 CRUD 尺寸,优先于全局 size
formSizestring未设置单独设置 Form 尺寸,优先于全局 size
calcHeightnumber0CRUD 自动高度的额外扣减量,与页面 option.calcHeight 相加
menuTypestringtextCRUD 操作按钮类型,页面 option.menuType 优先,详见操作栏
crudOptionobject{}CRUD 的默认 option
formOptionobject{}Form 的默认 option
appendToBodybooleantrue被相关弹窗组件读取的挂载设置
optionValidatebooleantrue开启配置警告;不代替表单值校验,见配置校验
axios请求实例Avue 内置 Axios远程字典、上传等请求使用的实例
localestring / objectzh-cn内置语言代码或语言对象
i18nfunction未设置自定义翻译函数,详见国际化

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 模式下使用,单个上传字段的同名配置优先于全局对象。配置按对象选择,不会把字段配置逐项补齐为全局值;详见上传组件。

配置源码读取的主要字段默认值
qiniuAK、SK、scope、url、bucket、deadline字符串为空;bucket: 'https://upload.qiniup.com'、deadline: 1
aliregion、endpoint、stsToken、accessKeyId、accessKeySecret、bucket各字段为空字符串
cosSecretId、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。

最后更新:
贡献者: smallwei
Prev
TypeScript 使用
Next
国际化