配置说明 new
此包拥有众多配置，能够满足众多条件下的开发使用，配置项较多，请仔细阅读并理解每一个配置项的含义及作用。
字典包配置
| 字段名称 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
getDictCodeApi | Promise | 是 | 获取字典数据的 Promise 方法（需返回接口请求结果） |
query | string | 否 | 请求字典接口的参数字段名，示例：{ "type": "SEX" } 中的 "type" |
formatterRequest(query, dictType) | function | 否 | 格式化请求参数的方法： - query：上述 query 配置的值；- dictType：当前请求的字典类型（如 SEX） |
formatterDictList(data, dictType) | function | 否 | 格式化接口响应数据的方法： - data：接口返回的原始数据；- dictType：当前请求的字典类型；（解决后端接口无字典类型标识的场景） |
formatterDictVersion(data) | function | 否 | 格式化字典版本号的方法，data 为接口返回的原始数据 |
version | string | 否 | 当前字典数据的版本号（默认 "unknow"） |
format | object | 否 | 字典字段名映射配置（默认值见下文「配置默认值」） |
treeSetting | object | 否 | 一维数组转树形结构的配置（默认值见下文，含 idField、parentIdField 等） |
filterDataFun(list) | function | 否 | 全局过滤字典数据的方法（如过滤未启用数据），list 为字典数组 |
disabledDataFun(item) | function | 否 | 全局禁选字典项的方法： - item：单个字典对象；- 只要此方法返回 true 或 item 自身 format.disabled 为 true，即禁选 |
storage | 枚举 | 否 | 字典缓存位置（默认 localStorage，可选 sessionStorage） |
dictDataKey | string | 否 | 缓存字典数据的键名（默认 "vue3Vant4DictData"） |
versionKey | string | 否 | 缓存字典版本号的键名（默认 "vue3Vant4DictVersion"） |
localDictCodes | object | 否 | 本地字典数据（字段需与配置一致，且类型不与接口字典冲突） |
isGetAll | Boolean | 否 | 项目初始化时是否获取全部字典（需接口支持） |
usuallyGetDictTypes | string | 否 | 项目初始化时获取的常用字典类型（多个用逗号分隔，需接口支持批量请求） |
usuallyGetDictTypesByApi | Boolean | 否 | 常用字典是否强制从接口获取（忽略缓存，默认 false） |
getLoginStatusFunc | function | 否 | 获取登录状态的响应式方法（如 Pinia 状态），避免未登录时请求接口报错 |
loginStatusChangeFunc(loginStatus) | function | 否 | 登录状态变化时的回调： - loginStatus：true（已登录）/ false（未登录） |
autoRegisterComponent | Boolean | 否 | 是否自动注册组件，默认为 false |
componentsPreFix | String | 否 | 自动注册组件时组件名称前缀（解决组件名冲突，默认 "Dict"） |
maskv1.1.0 | Object | 否 | 自定义脱敏方法，可覆盖或新增，默认值为空对象 |
formatDatev1.1.0 | Function | 否 | 自定义日期格式化方法，默认值为null，需严格满足要求，否则日期相关组件可能有问题 |
validatorv1.1.0 | Object | 否 | 自定义表单快捷校验方法，可覆盖或新增包自带的校验方法，默认值为空对象 |
dynamicComponentsConfigv1.1.0 | Object | 否 | 动态组件相关的一些默认配置 |
默认配置
js
query: "dictType",
versionKey: "vue3Vant4DictVersion",
dictDataKey: "vue3Vant4DictData",
format: {
value: "value",
label: "label",
disabled: "disabled",
type: "type",
color: "color",
icon: "icon", // 部分组件需要用到icon字段
},
formatterRequest: (query, dictType) => {
if (!dictType) {
return { [query]: "" };
}
return { [query]: dictType };
},
formatterDictList: (
data,
dictType
) => {
if (!data || !data.dictData) {
return {}
}
return data.dictData
},
formatterDictVersion: (data) => {
if (!data || !data.version) {
return "unknow"
}
return data.version
},
version: "unknow",
storage: localStorage,
usuallyGetDictTypes: "",
usuallyGetDictTypesByApi: false,
isGetAll: false,
localDictCodes: {},
//配置数组数据转化成树形数据
treeSetting: {
idField: "id", //唯一标识字段名
parentIdField: "parentId", //父节点唯一标识字段名
childrenField: "children", //子节点标识字段名
firstId: "0", // 根节点值
valueField: "", // value字典名 为空时 取 format.value 的配置
valueArrField: "valueArr",
labelField: "", //label字段名
labelArrField: "labelArr", //给对象新增的中文数组字段名
idArrField: "idArr", //给对象新增的id数组字段名
levelField: "level", //给对象新增的层级字段名
level: 0, // 给第一级展示的层级
leafField: "leaf", //叶子节点标识字段名
},
componentsPreFix: "Dict", // 组件名前缀
getLoginStatusFunc: () => { // 获取登录状态 默认为true
return true
},
loginStatusChangeFunc: null,
//组件过滤数据 配置
filterDataFun: (list) => {
return list;
},
//组件禁用数据 配置
disabledDataFun: (item) => {
return false;
},
mask: {}, //V1.1.0及以上 可新增自定义脱敏方法，传递和包自带的脱敏方法一样的键名可覆盖其脱敏方法 如 mobile、name、email、idCard等
formatDate: null, // v1.1.0及以上 自定义日期格式化方法，配置后组件的日期格式化方法将由此处提供
validator: {}, // v1.1.0及以上 自定义表单快捷校验方法，可新增或覆盖包自带的校验方法，如 name、mobile等
// v1.1.0及以上 动态组件的相关渲染配置
dynamicComponentsConfig: {
disabledNoPlaceholder: true, // 禁用状态是否不显示 placeholder，默认true
readonlyNoPlaceholder: true, // 只读状态是否不显示 placeholder，默认true
isAutoSetPlaceholder: true, // 是否自动设置 placeholder，默认true
isShowLabelPlaceholder: false, // 禁用状态是否显示 label placeholder，默认false
isShowLabelColon: false, // 标签后是否显示冒号，默认false
isScrollToFormError: true, // 校验失败时是否自动滚动到错误位置，默认true
showRuleType: "compare", // 显示规则校验类型
validatorRuleType: "compare", // 表单校验类型
props: { // 动态组件针对表单相关组件的默认属性值
clearable: true,
} // 默认属性
},