全局配置

通过 app.use(yoyooUi, options) 传入全局配置选项。

完整接口

interface InstallOptions {
  dataPicker: {
    enum: (code: string) => Promise<DataNode[]> | DataNode[]
    typeRender: {
      [key: string]: (opt: { value: any; notify: (value: any) => void; props: any }) => any
    }
  }
  dataPickerTable: {
    typeRender: { [key: string]: () => any }
  }
  displayByPermission: (permission: string, namespace: string) => boolean
  upload: Partial<UploadOptions>
  table: Partial<TableOptions>
  time: { iso: boolean }
  datePicker: { valueFormat?: string; displayFormat?: string }
  debug: boolean
}

配置项说明

upload — 文件上传

属性	类型	说明
getImageUrl	(path: string) => string	根据相对地址拼接完整的访问地址
uploadFile	(file: File) => Promise<string>	上传文件，返回文件在服务器的相对地址
uploadSuccess	(insertImg, res) => void	富文本上传成功回调

table — 表格配置

属性	类型	默认值	说明
page	{ page: number; limit: number }	{ page: 1, limit: 20 }	默认分页
actionsCount	number	3	操作按钮显示数量，超出折叠
actionResult	(type, tableRef, item, resp) => void	—	操作结果回调
typeRender	Record<string, (opt) => any>	—	自定义列渲染

dataPicker — 数据选择器

属性	类型	说明
enum	(code: string) => Promise<DataNode[]>	枚举数据解析函数
typeRender	Record<string, (opt) => any>	自定义选择器类型渲染

time — 时间配置

属性	类型	默认值	说明
iso	boolean	false	是否使用 ISO 时间格式

datePicker — 日期选择器

属性	类型	默认值	说明
valueFormat	string	—	绑定值格式
displayFormat	string	'YYYY-MM-DD'	显示格式

displayByPermission — 权限控制

displayByPermission: (permission: string, namespace: string) => boolean

用于按钮/列级别的权限控制，返回 false 则隐藏。

debug — 调试模式

debug: boolean  // 默认 false

开启后会在控制台输出组件内部状态和配置信息。

配置示例

app.use(yoyooUi, {
  debug: true,
  upload: {
    uploadFile: async (file) => {
      const formData = new FormData()
      formData.append('file', file)
      const res = await axios.post('/api/upload', formData)
      return res.data.path  // 返回相对地址
    },
    getImageUrl: (path) => `https://cdn.example.com/${path}`,
  },
  table: {
    page: { page: 1, limit: 10 },
    actionsCount: 5,
  },
  datePicker: {
    displayFormat: 'YYYY-MM-DD HH:mm',
  },
  dataPicker: {
    enum: async (code) => {
      const res = await axios.get(`/api/enum/${code}`)
      return res.data
    },
  },
})

运行时更新

你也可以在运行时更新配置：

import { setInstallOptions } from 'yoyoo-ui'

setInstallOptions({
  debug: false,
  table: { page: { page: 1, limit: 50 } },
})