接口类型

在下方组件文档中，我们为每个组件均提供了 Types 模块，用于清晰描述该组件支持的props属性与emits事件。需要注意的是，不同组件之间可能存在共用的接口及类型声明，若在每个组件文档的 Types 模块中重复定义这些内容，不仅会造成代码冗余，还会降低整体代码的可维护性。基于此，我们将所有共用的接口与类型声明进行单独提炼、统一管理，既避免重复开发，也便于后续的修改与维护。

import type { Component, VNode } from 'vue'

// =========================== 渲染器相关接口 start ===========================
/**
 * 渲染器内容类型
 */
export type RenderContent =
  | string
  | number
  | boolean
  | unknown[]
  | Record<string, any>
  | VNode
  | Component

/**
 * 渲染器配置接口
 */
export interface RenderConfig {
  /** 内容 */
  content?: RenderContent
  /** 样式类名 */
  class?: string
  /** 内联样式 */
  style?: string
  /** 内联样式字段 */
  styleField?: string
  /** 单位 */
  unit?: string
}
// =========================== 渲染器相关接口 end ===========================

// =========================== 字典相关接口 start ===========================
/**
 * 字典属性接口 共用于其它props配置属性
 */
export interface DictProps {
  /** 指定选项label为选项对象的某个属性值 */
  label: string
  /** 指定选项value为选项对象的某个属性值 */
  value: string
  /** 指定选项children为选项对象的某个属性值 */
  children: string
}

/**
 * 字典映射接口
 */
export interface DictMap {
  /** 形如：{ 性别: [{ label: '男', value: 1 },{ label: '女', value: 2 }] } */
  [key: string]: Record<DictProps['label'] | DictProps['value'], any>[]
}

/**
 * 使用字典接口
 */
export interface UseDict {
  /** 字典key 即dictMap的key，为boolean则以label作为dictMap的key */
  key?: string | boolean
  /** 字典属性 */
  props?: DictProps
  /** 字典类名 */
  class?: string
  /** 内联样式 */
  inlineStyle?: string
  /** 字典样式字段 */
  styleField?: string
  /** 字典分割符 默认为逗号(,) */
  separator?: string
}
// =========================== 字典相关接口 end ===========================

// =========================== 其他接口 start ===========================
/**
 * 上传配置接口
 */
export interface UploadConfig {
  /** 上传地址 */
  action?: string
  /** 请求头 */
  headers?: Record<string, unknown>
  /** 上传数据 */
  data?: Record<string, unknown>
  /** 其他配置项 */
  [key: string]: any
}

/**
 * 全局配置接口 其他组件声明globalConfig类型时需要
 */
export interface GlobalConfig {
  /** 最终语言 */
  finalLanguage: string
  /** 最终字典属性 */
  finalDictProps: DictProps
  /** 最终字典映射 */
  finalDictMap: DictMap
  /** 最终crud表格页面高度 */
  finalCrudTablePageHeight: string
  /** 最终crud表格弹窗高度 */
  finalCrudTableModalHeight: string
  /** 最终表格页面高度 */
  finalTablePageHeight: string
  /** 最终表格弹窗高度 */
  finalTableModalHeight: string
  /** 最终表格页面底部预留偏移 */
  finalTablePageBottomOffset: number
  /** 最终表格弹窗底部预留偏移 tableMode=modal生效 */
  finalTableModalBottomOffset: number
  /** 最终上传配置 */
  finalUploadConfig: UploadConfig
}

/**
 * input事件名称类型
 */
export type InputEventName = 'nonNegativeDecimal'

/**
 * input事件接口
 */
export interface InputEvent {
  /** input事件名称 */
  name: InputEventName
  /** 保留的小数位数 */
  digits?: number
  /** 回调函数 */
  cb?: Function
}

/**
 * 编辑配置属性接口
 */
export interface EditAttrs {
  /** 是否追加label到placeholder后面 默认是，不需要可显式设置appendLabelToPlaceholder为false */
  appendLabelToPlaceholder?: boolean
  /** UseElSelect等组件的options */
  options?: Record<string, any>[]
  /** UseElSelect等组件的props */
  props?: DictProps
  /** change事件 */
  changeEvent?: Function
  /** focus事件 */
  focusEvent?: Function
  /** input事件 */
  inputEvent?: Function | InputEventName | InputEvent
}
// =========================== 其他接口 end ===========================

接口类型 ​

接口类型