vue2-vant-dict

<van-cascader-dict :field-names="{text: 'areaName', value: 'id', children: 'children'}" @dictChange="handleChange" label="地区(基础用法)" label-width="110px" title="地区选择" input-align="right"  dictType="city" placeholder="请选择地区" v-model="value1" ></van-cascader-dict>

<van-select-dict @dictChange="handleChange" label="性别(基础用法)" label-width="100px" input-align="right" dictType="AAC004" placeholder="请选择性别" v-model="value1" ></van-select-dict>

<template>
  <div>
    <van-field-dict label="姓名" v-model="value1"></van-field-dict>
    <van-field-dict label="证件号码" v-model="value2"></van-field-dict>
    <van-field-dict label="手机号" v-model="value3"></van-field-dict>
    <van-field-dict label="地址" type="textarea" v-model="value4"></van-field-dict>

    <van-field-dict label="姓名" maskType="name" v-model="value1"></van-field-dict>
    <van-field-dict label="证件号码" maskType="idCard" v-model="value2"></van-field-dict>
    <van-field-dict label="手机号" maskType="mobile" v-model="value3"></van-field-dict>
    <van-field-dict label="地址" type="textarea" maskType="address" v-model="value4"></van-field-dict>
    <van-field-dict label="前三后四" :maskStart="3" :maskEnd="4" v-model="value5"></van-field-dict>
    <van-field-dict label="前三中三后四" :maskStart="3" :maskMiddle="3" :maskEnd="4" v-model="value6"></van-field-dict>
    <van-field-dict label="默认值" defaultVal="恭喜发财" maskType="name" v-model="value7"></van-field-dict>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "沈小布",
      value2: "35062418892031",
      value3: "18859661234",
      value4: "宁夏回族自治区闽宁镇涌泉村芗城路142号",
      value5: "1234567890",
      value6: "13145021314",
      value7: ""
    }
  }
}
</script>

<style>

</style>

npm install vue2-vant-dict

//引入请求字典接口
import {getDictCodeApi} from "@/api/common-api"
//引入本地缓存数据
import localDictCodes from "@/assets/data/dict"

export default {
  getDictCodeApi: getDictCodeApi, // 获取字典的接口  必传
  version: "0.0.1", // 当前字典版本号 必传 获取全局配置化需 覆盖此版本号数据
  localDictCodes, // 本地字典数据
  versionKey: "xiaobuDictVersion", // 在浏览器缓存的版本号键名 选传 默认值vue3ElementDictVersion
  dictDataKey: "xiaobuDictData", // 在浏览器缓存的字典数据键名 选传 默认值 vue2VantDictData
  query: "type", // 请求字典接口的参数名 选传 默认 dictType
  format: {
  	label: "dictLabel", // 配置字典值和显示
    value: "dictValue", // 配置字典值和显示
    type: "type", // 配置字典类型 部分组件可用
    color: "color", // 配置字典颜色 部分组件可用
    disabled: "disabled" // 配置字典禁用字段名
  }, 
  formatterDictList: (data, query) => {
  	return data.xiaobuDictData
  }, // data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回  data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式
  formatterDictVersion: (data) => {
    return data.xiaobuDictVersion
  }, // data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对
  filterDataFun: (list) => {
      return list.filter(item => item.status === '1')
  }, // 可对返回的字典数据进行过滤 list为某字典类型的数据 选传，默认不过滤  return list
  disabledDataFun: (list) => {
      return list.map(item => {
          ...item,
          disabled: item.isDisabled === '1'
      })
  }, // 可对返回的字典数据配置禁用字段 list为某字典类型的数据 选传，默认不过滤  return list
  formatterRequest: (query, dictType) => {
    // ...此处无法举例 以包默认形式展示
    if (!dictType) {
        return { [query]: "" };
    }
    return { [query]: dictType };
  }, // 格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式。
    
  storage: localstorage, //数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容iframe嵌套项目
  treeSetting: {
      labelField: "areaName" //label字段名 默认值id
      parentIdField: "parentId", //父节点唯一标识字段名 默认值 parentId
      childrenField: "children", //子节点标识字段名 默认值 children
      firstId: "0", // 根节点值 默认值 字符串 0
      labelField: "label", //label字段名 默认值 label
      labelArrField: "labelArr", //给对象新增的中文数组字段名 默认值 labelArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】
      idArrField: "idArr", //给对象新增的id数组字段名 默认值 idArr 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】
      levelField: "level", //给对象新增的层级字段名 值为层级
      level: 0, // 给根目录配置的层级 配置根目录层级为 0 级
      leafField: "leaf" //叶子节点标识字段名 值为 true或 false
  } // 对树形数据的配置 选传 字典支持将数组结构转化为树形结构
}

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": "朝阳区"
    }
  ]
}

import Vue from "vue"
import App from "./App.vue"
// 引入组件库
import Vant from "vant-xiaobu"
import "vant-xiaobu/lib/index.css"
Vue.use(Vant)

import router from "@/router"
import { beforeEachHandler } from "@/router/before-each"
import afterEachHandler from "@/router/after-each"
router.beforeEach(beforeEachHandler)
router.afterEach(afterEachHandler)

import {getGlobalConfigApi} from "@/api/module/common-api.js"
import dictConfig from "@/dict-config.js"
import vue2VantDict from "vue2-vant-dict"

//获取当前版本号
getGlobalConfigApi().then(data => {
  const {version} = data
  Object.assign(dictConfig, {version})
  Vue.use(vue2VantDict, dictConfig)
  new Vue({
    router,
    render: h => h(App)
  }).$mount("#app")
})