# 介绍
vue-elment-dict是一款基于elment组件库升级后形成的一个字典包。能够让您的项目经过一次配置,后续使用简单。快速开始>>
# 优势
- 配置项多,更灵活,减少对后端开发人员的依赖
- 可用组件多,很多组件(包含联级选项和树菜单组件)均可直接使用
- 全局过滤器多,使用简单,提升效率
- 全局方法多,实用
- 性能优越,对于同个字典类型的请求,同时只会请求一次
- 适用场景多,嵌套iframe业务功能页也可使用
- 可配置版本,实现字典数据自动更新
- 使用缓存,减少请求,提升性能。
- 也可配置本地固定字典数据
- 补充解决element的message消息提示框的不足
- 暴露防止重复请求封装方法,使用后可减少请求
# 项目依赖
- element部分组件
- day.js
# 后端字典接口要求
可以请求单个或多个甚至全部字典类型数据
注意:此字典包可以对接口数据和接口请求进行配置,但是为了减少配置,后端尽可能按此包默认形式返回对前端更加友好。具体请求格式可以参照。目录结构>>中 模拟接口请求的形式。具体如下:
- 默认请求参数: {type: ""} type为空返回全部字典值
- 获取多个字典 请求参数 {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 真香,使用后大家都说好,更多经验分享可关注微信公众号【爆米花小布】
快速开始 →