安装依赖

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，用于配置字典包相关配置。配置项如下

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中的一致

接口返回的字段的数据也同理

:::

1. 【优化】新增 getDictData 和 getDictDataByKey 方法，用于获取字典数据。
2. 【优化】修复van-cascader-dict组件值设置为空后，显示值不会为空的问题
3. 【优化】修复radio组件和checkbox组件首次加载组件时报错的问题

1. 【修复】字典包配置disabledDataFun和filterDataFun无效问题，修改disabledDataFun默认值。
2. 【修复】修复van-select-dict组件自定义数据时，format配置disabled字段后 无法禁选问题

1. 【发布】vue3-vant3-dict发布