安装依赖
npm install vue3-vant3-dict使用vant3-xiaobu代替vant组件库，让他多暴露一个FORM_KEY，让字典包可实现属性继承。至于为何可查阅文章van-form的子组件是如何继承van-form的部分属性的
字典包配置可查阅文章字典包的配置
功能过于强大，基本配置文档可先查阅因为一个组件爱上一个插件之van-multiple-select-dict组件
可查阅此篇文章查看简单介绍
此包拥有组件及方法在此列出来
组件
van-select-dict 选项组件
van-multiple-select-dict 多选组件
van-tabs-dict tab栏组件
van-field-dict 输入框组件
van-calendar-dict 日历选择组件
van-datetime-dict 日期选择组件
van-dropdown-item-dict 配合van-dropdown-menu的下拉列表组件
van-radio-dict 单选框组件
van-checkbox-dict 复选框组件
van-cascader-dict 联级选项组件
van-button--dict 按钮组件
van-tag-dict 标签组件
过滤器：字典过滤方法 函数形式调用 也可使用过滤器方式
getLabelByCodeFilter
getLabelByCodesFilter
getCodeByLabelFilter
getCodeByLabelsFilter
getTreeLabelByCodeFilter
getTreeLabelByCodesFilter
getTreeCodeByLabelFilter
getTreeCodeByLabelsFilter
formatDate
desensitization
方法
普通方法 函数
getDictConfig
getDictConfigByKey
字典相关 promise方法
getLabelByCode
getLabelByCodes
getCodeByLabel
getCodeByLabels
getTreeLabelByCode
getTreeLabelByCodes
getTreeCodeByLabel
getTreeCodeByLabels
日期格式化 函数
formatDate
isDate
脱敏相关 函数
mask
maskAddress
maskIdCard
maskName
maskPhone
desensitization
树形结构相关 函数
listToTree
getTreeItemByCode
getTreeItemByLabel
开发不易，如果对您有所帮助，可赞助作者，利于官网服务器运营。您的支持，是我继续努力的最大动力。
src下新建文件dict-config.ts，用于配置字典包相关配置。配置项如下
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|---|---|---|---|---|
| getDictCodeApi | Promise | 是 | 请求字典接口 | — |
| version | String | 是 | 当前字典包版本号 必传 | — |
| localDictCodes | Object | 否 | 本地字典数据 | {} |
| versionKey | String | 否 | 在浏览器缓存的版本号键名 | vue3Vant3DictVersion |
| dictDataKey | String | 否 | 在浏览器缓存的字典数据键名 | vue3Vant3DictData |
| query | String | 否 | 请求字典接口的参数名 | dictType |
| format | Object | 否 | 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 | {label: "label", value: "value", disabled: "disabled", type: "type", color: "color"} |
| formatterDictList | Function | 否 | data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式 | (data) => {return data.dictData} |
| formatterDictVersion | Function | 否 | data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.version 获取到版本号后会 与字典包配置的版本号进行比对 | (data) => {return data.version} |
| filterDataFun | Function | 否 | 可对返回的字典数据进行过滤 list为某字典类型的数据 | （list) => {return list} |
| disabledDataFun | Function | 否 | 可对返回的字典数据配置禁用字段 list为某字典类型的数据 | (item) => {return false} |
| formatterRequest | Function | 否 | 兼格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式 | (query, dictType) => {if(!dictType){return { [query]: "" }} return { [query]: dictType }} |
| storage | storage | 否 | 数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容 | localstorage |
| treeSetting | Object | 否 | 树形相关数据配置 | 继续阅读文档 |
| isGetAll | Boolean | 否 | 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest | false |
| usuallyGetDictTypes | String | 否 | 经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 选传 默认空 多个字典以 英文逗号隔开 如 sex,personType | "" |
| usuallyGetDictTypesByApi | Boolean | 否 | 是否必从接口中获取。 | false |
isGetAll为true时，每次进入项目都将会通过接口获取所有字典数据。
isGetAll为false，且usuallyGetDictTypes无配置时，则不做任何处理。
isGetAll为false，且usuallyGetDictTypes有配置字典类型时（多个时使用英文逗号分隔），如果缓存中存在的字典类型则不做处理，不存在的则会统一前往请求一次性获取。总之配置在usuallyGetDictTypes的字典类型必然会存在缓存中。
isGetAll为false，usuallyGetDictTypes有配置字典类型时（多个时使用英文逗号分隔），且配置了usuallyGetDictTypesByApi为true时，则会统一前往请求一次性获取usuallyGetDictTypes配置的字典类型并与旧缓存合并存储在缓存中。
localDictCodes的格式及字典数据的的格式如下
export default {
SEX: [
{
value: "1",
label: "男"
},
{
value: "2",
label: "女"
},
{
value: "3",
label: "未知"
}
],
niceOrBad: [
{
"value": "0",
"label": "好"
}, {
"value": "1",
"label": "差"
}
],
area: [
{
"id": "110000",
"parentId": "0",
"label": "北京"
},
{
"id": "110100",
"parentId": "0",
"label": "北京市"
},
{
"id": "110101",
"parentId": "110100",
"areaName": "东城区"
},
{
"id": "110102",
"parentId": "110100",
"areaName": "西城区"
},
{
"id": "110105",
"parentId": "110100",
"areaName": "朝阳区"
}
]
}:::warning
localDictCodes本地配置的value及label 以及 树形结构的 label及id须与dict-setting中的一致
接口返回的字段的数据也同理
:::
| 字段 | 类型 | 必传 | 说明 | 默认值 |
|---|---|---|---|---|
| idField | String | 否 | 树形数据值的键名 | id |
| parentIdField | String | 否 | 父节点的键名 | parentId |
| childrenField | String | 否 | 生成的树形结构子节点的字段名 | children |
| firstId | String，Number | 否 | 根节点的值 | “0” |
| labelField | String | 否 | 显示的值的字段名 | label |
| labelArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】 | labelArr |
| idArrField | String | 否 | 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】 | idArr |
| levelField | String | 否 | 给对象新增的层级字段名 | level |
| level | Number | 否 | 配置根目录的层级 | 0 |
| leafField | String | 否 | 是否叶子节点的字段名 值为boolean | leaf |
- 【优化】van-cascader-dict组件的fieldNames属性新增idField字段配置用于配置数组数据根据什么id字段转化为树形结构数据
- 【优化】van-cascader-dict组件的值的配置字段从原先的treeSetting.idField 改为现在的 format.value 配置
- 【优化】treeSetting.idField配置作用改为仅用于数组转树形结构判断依据使用
- 【优化】优化getDictObjByDictTypes方法
const endTreeSetting = computed(() => {
const oldTreeSetting = JSON.parse(JSON.stringify(dictConfig.treeSetting))
const props = $attrs.fieldNames??{}
const newProps = {
idField: props.idField??oldTreeSetting.idField,
labelField: props.text??oldTreeSetting.labelField,
childrenField: props.children??oldTreeSetting.childrenField
}
const treeSetting = Object.assign(oldTreeSetting, newProps)
return treeSetting
})
const setting = computed(() => {
const props = $attrs.fieldNames??{}
props.value = props.value??dictConfig.format.value
props.text = props.text??dictConfig.treeSetting.labelField
props.children = props.children??dictConfig.treeSetting.childrenField
return props
})- 【优化】新增 getDictData 和 getDictDataByKey 方法，用于获取字典数据。
- 【优化】修复van-cascader-dict组件值设置为空后，显示值不会为空的问题
- 【优化】修复radio组件和checkbox组件首次加载组件时报错的问题
- 【修复】字典包配置disabledDataFun和filterDataFun无效问题，修改disabledDataFun默认值。
- 【修复】修复van-select-dict组件自定义数据时，format配置disabled字段后 无法禁选问题
- 【发布】vue3-vant3-dict发布