# 介绍

vue-elment-dict是一款基于elment组件库升级后形成的一个字典包。能够让您的项目经过一次配置,后续使用简单。快速开始>>

# 优势

  1. 配置项多,更灵活,减少对后端开发人员的依赖
  2. 可用组件多,很多组件(包含联级选项和树菜单组件)均可直接使用
  3. 全局过滤器多,使用简单,提升效率
  4. 全局方法多,实用
  5. 性能优越,对于同个字典类型的请求,同时只会请求一次
  6. 适用场景多,嵌套iframe业务功能页也可使用
  7. 可配置版本,实现字典数据自动更新
  8. 使用缓存,减少请求,提升性能。
  9. 也可配置本地固定字典数据
  10. 补充解决element的message消息提示框的不足
  11. 暴露防止重复请求封装方法,使用后可减少请求

# 项目依赖

  1. element部分组件
  2. day.js

# 后端字典接口要求

可以请求单个或多个甚至全部字典类型数据

注意:此字典包可以对接口数据和接口请求进行配置,但是为了减少配置,后端尽可能按此包默认形式返回对前端更加友好。具体请求格式可以参照。目录结构>>中 模拟接口请求的形式。具体如下:

  1. 默认请求参数: {type: ""} type为空返回全部字典值
  2. 获取多个字典 请求参数 {type: "AAC004,AAC005"} 英文逗号隔开

如果接口与字典包不符,可参照字典包配置项>>

# 暴露的方法

dayFormat                日期格式化
desensitization          数据脱敏
getCodeByLabel           根据字典中文返回字典值
getCodeByLabels          根据多个字典中文返回多个字典值
getDictObjByDictTypes    通过字典类型查询字典类型数据
getLabelByCode           根据字典值返回字典中文
getLabelByCodes          根据多个字典值返回多个字典中文
getTreeCodeByLabel       树形数据根据字典中文返回字典值
getTreeCodeByLabels      树形数据根据多个字典中文返回多个字典值
getTreeLabelByCode       树形数据根据字典值返回字典中文
getTreeLabelByCodes      树形数据根据多个字典值返回多个字典中文
message                  message方法,与element的message使用方法一致,弥补其不足
request                  暴露防止重复请求的方法  const newRequest = request(axios)

WARNING

以上方法均被字典包自动挂载到Vue实例,在页面上可直接使用this.$方法名调用。新增的方法不要与之冲突。

TIP

对于无法使用this调用的地方,可以使用按需加载的方式

import {方法名} from "vue-element-dict"

const {方法名} = require("vue-element-dict")

以上两种方式均可

# 总结

vue-elment-dict 真香,使用后大家都说好,更多经验分享可关注微信公众号【爆米花小布】

上次更新: 6/29/2022, 3:01:11 PM