快速开始

阅读此处时，默认您已经完全熟悉字典包的相关配置，如还未完全了解，请阅读使用须知。

下列一堆文字，您懒得阅读的话，您可以阅读SKILL技能包方式快速完成Element Plus字典包初始化

安装

Element Plus的使用请阅读Element Plus的官方文档，此处不再赘述。

npm i vue3-element-dict -S

新建一个src/assets/data/dict.js文件

此文件为存储本地字典数据，文件位置您可以自定义，只要在配置项引入时路径正确即可，建议路径为 src/assets/data/dict.js

示例本地字典数据如下：

export default {
  // 性别
  SEX_DEMO: [
    { label: "男", value: 1, type: "primary" },
    { label: "女", value: 2, type: "danger" }
  ],
  // 状态
  STATUS_DEMO: [
    { label: "启用", value: "1" },
    { label: "禁用", value: "0" }
  ]
}

新建一个src/api/modules/common-api.js文件

暴露获取字典的接口，供配置时使用。文件位置一样的，您可以自行选择路径，但请确保路径正确。建议路径为 src/api/modules/common-api.js

此处使用promise模拟一个字典接口示例，使用时自行替换为您自己的接口，您的字典接口请求数据格式、接口返回数据格式与字典包要求不一致时，可详细阅读配置说明， 通通都能转化成可以使用的字典数据。

//模拟的获取字典数据接口 有接口时 请使用接口替代
export function getDictCodeApi(options) {
  var promise = new Promise(function (resolve) {
    const dictCodeList = {
      FRUITS_DEMO: [
        {
          value: "1",
          label: "苹果"
        },
        {
          value: "2",
          label: "草莓"
        }
      ],
      VEGETABLES_DEMO: [
        {
          value: "1",
          label: "西红柿"
        },
        {
          value: "2",
          label: "西蓝花"
        }
      ],
      AREA_DEMO: [
        {
          id: "35060000", // 树形数据 的id 字段 可配置 treeSetting.idField 字段修改  此字段用于 将一维数组转化为树形结构的依据
          parentId: "0", // 树形数据的 父级id 字段 可配置 treeSetting.parentIdField 字段修改 此字段用于 将一维数组转化为树形结构的依据
          value: "1", // 树形数据 的value 字段 可配置 format.value 字段修改 如果与 一维数组的value字段不一致时，那可以配置 treeSetting.valueField 字段修改
          label: "漳州市" // 树形数据 的label 字段 可配置 format.label 字段修改 如果与 一维数组的label字段不一致时，那可以配置 treeSetting.labelField 字段修改
        },
        {
          id: "35062400",
          parentId: "35060000",
          value: "2",
          label: "诏安县"
        },
        {
          id: "35062401",
          parentId: "35062400",
          value: "3",
          label: "太平镇",
          disabled: true
        },
        {
          id: "35062402",
          parentId: "35062400",
          value: "4",
          label: "金星乡"
        },
        {
          id: "35062403",
          parentId: "35062400",
          value: "5",
          label: "南诏镇"
        },
        {
          id: "35062404",
          parentId: "35062400",
          value: "6",
          label: "霞葛镇"
        },
        {
          id: "35062300",
          parentId: "35060000",
          value: "7",
          label: "云霄县"
        },
        {
          id: "35062301",
          parentId: "35062300",
          value: "8",
          label: "列屿镇"
        },
        {
          id: "35062302",
          parentId: "35062300",
          value: "9",
          label: "陈岱镇"
        },
        {
          id: "35062303",
          parentId: "35062300",
          value: "10",
          label: "云陵镇"
        },
        {
          id: "35062304",
          parentId: "35062300",
          value: "11",
          label: "火田镇"
        }
      ]
    }

    let codeData = {}
    if (options && options.dictType) {
      const typeList = options.dictType.split(",")
      for (let i = 0; i < typeList.length; i++) {
        const dictType = typeList[i]
        codeData[dictType] = dictCodeList[dictType]
      }
    } else {
      codeData = dictCodeList
    }
    const data = {
      dictData: codeData,
      version: "5.2.0"
    }
    setTimeout(() => {
      resolve(data)
    }, 1000)
  })
  return promise
}

//获取全局配置  包含版本号
export function getGlobalConfigApi() {
  return new Promise((resolve, reject) => {
    resolve({ version: "5.2.0" })
  })
}

新建一个src/dict-config.js文件

此文件为字典包的配置文件，此处列举一下必填项配置

import { getDictCodeApi } from "../theme/api/modules/common-api.js"
import localDictCodes from "../theme/assets/data/dict.js"
export default {
  getDictCodeApi, //必传 获取字典数据接口
  localDictCodes //选填 项目写死的字典数据
}

main.js中使用

import { createApp } from "vue"
import App from "./App.vue"

import Antd from "ant-design-vue"
import "ant-design-vue/dist/reset.css"

// 引入字典包配置
import vue3AntDict from "vue3-element-dict"
import "vue3-element-dict/lib/style.css"
import dictConfig from "@/dict-config.js"
import { getGlobalConfigApi } from "@/api/modules/common-api.js"

const app = createApp()

app.use(Antd)
const initDict = async () => {
  const data = await getGlobalConfigApi()
  const resultConfig = { ...dictConfig, version: data.version }
  app.use(vue3AntDict, resultConfig)
}
await initDict()

app.mount("#app")

使用

在页面中使用

<dict-input label="姓名" maskType="name" clearable placeholder="请输入姓名" v-model="name"></dict-input>

当聚焦的时候可以输入，输入姓名后失去焦点时会脱敏展示，说明组件引入成功了。

验证字典组件配置是否成功就可尝试如下代码, dictType 传入接口存在的字典类型

<dict-select label="喜欢的水果" dictType="FRUITS_DEMO" placeholder="请选择" v-model="sport" clearable></dict-select>

验证失败

非常遗憾，验证失败了，请再次阅读配置说明并理解配置项的含义及作用。

验证成功

恭喜您，验证成功啦，可以继续阅读下列具体文档来使用啦。