前端枚举

vue- enum

SmartAdmin采用vue-enum进行常量管理

原因

如果你是全栈开发者,你应该了解服务端语言的枚举类型enum,但是对于前端而言没有枚举类型。
如果你是前端开发者,你一定见过这样的代码:

// 根据数字获取文件位置描述 getFileLocationTypeDesc(value) { if(value === 1){ return "本地文件服务"; } if(value === 3){ return "阿里OSS文件服务"; } if(value === 3){ return "七牛文件服务"; } },
<div> <span v-if="locationType === 2"> <input type="file"/> </span> <span v-if="locationType === 3"> <button value="上传"/> </span> </div>

如果后端把value的值修改一种类型或者新加一种类型,想必前端改起来会非常麻烦,而且极其容易出错。

使用vue-enum

vue-enum (https://github.com/1024-lab/vue-enum)

vue-enum是河南·洛阳 1024创新实验室(钢圈网旗下)团队研发前端常量 枚举工具。

1、引入常量插件,并在main.js中注入。
npm install vue-enum --save

import Enum from 'vue-enum'

Vue.use(Enum,{enumInfo})  //enumInfo为需要注入的常量模块
2、在src目录下建立constants文件夹并建立index.js 将常量模块导出

constants/index.js
例:

import noticeConstantfrom './noticeConstant/index.js'
export default {
   ...noticeConstant,
}
3、按照以下格式进行枚举常量的定义

constants/noticeConstant/index.js

export const NOTICE_STATUS = { YES: { value: 1, desc: '是' }, NO: { value: 0, desc: '否' } };

vue-enum使用方法

vue-enum提供三个常规方法以供页面内组件使用

方法名 参数名 结果
getDescByValue enumName,value 根据枚举值获取描述desc
getValueDescList enumName 根据枚举名获取对应的描述键值对[{value:desc}]
getValueDesc enumName 根据枚举名获取对应的value描述键值对{value:desc}

例:

1this.$enum.getDescByValue('NOTICE_STATUS',0) // '是' 2this.$enum.getValueDescList('NOTICE_STATUS') [{ desc:'是', value:1 }, { desc:'否', value:0 }] 3this.$enum.getValueDesc('NOTICE_STATUS') { 1:'是'0:'否' }

作者简介:
卓大, 1024创新实验室主任,混迹于各个技术,熟悉点java,略懂点前端。