# SmartAdmin采用vue-enum进行常量管理
# 原因
如果你是全栈开发者,你应该了解服务端语言的枚举类型enum,但是对于前端而言没有枚举类型。 如果你是前端开发者,你一定见过这样的代码:
// 根据数字获取文件位置描述
getFileLocationTypeDesc(value) {
if(value === 1){
return "本地文件服务";
}
if(value === 3){
return "阿里OSS文件服务";
}
if(value === 3){
return "七牛文件服务";
}
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div>
<span v-if="locationType === 2">
<input type="file"/>
</span>
<span v-if="locationType === 3">
<button value="上传"/>
</span>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
如果后端把value的值修改一种类型或者新加一种类型,想必前端改起来会非常麻烦,而且极其容易出错。
# 使用vue-enum
vue-enum (https://github.com/1024-lab/vue-enum) (opens new window)
vue-enum是河南·洛阳 1024创新实验室(钢圈网旗下)团队研发前端常量 枚举工具。
# 1、引入常量插件,并在main.js中注入。
npm install vue-enum --save
import Enum from 'vue-enum'
Vue.use(Enum,{enumInfo}) //enumInfo为需要注入的常量模块
1
2
3
4
5
2
3
4
5
# 2、在src目录下建立constants文件夹并建立index.js 将常量模块导出
constants/index.js 例:
import noticeConstantfrom './noticeConstant/index.js'
export default {
...noticeConstant,
}
1
2
3
4
2
3
4
# 3、按照以下格式进行枚举常量的定义
constants/noticeConstant/index.js
export const NOTICE_STATUS = {
YES: {
value: 1,
desc: '是'
},
NO: {
value: 0,
desc: '否'
}
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# vue-enum使用方法
vue-enum提供三个常规方法以供页面内组件使用
方法名 | 参数名 | 结果 |
---|---|---|
getDescByValue | enumName,value | 根据枚举值获取描述desc |
getValueDescList | enumName | 根据枚举名获取对应的描述键值对[{value:desc}] |
getValueDesc | enumName | 根据枚举名获取对应的value描述键值对{value:desc} |
例:
1、this.$enum.getDescByValue('NOTICE_STATUS',0)
// '是'
2、this.$enum.getValueDescList('NOTICE_STATUS')
[{
desc:'是',
value:1
},
{
desc:'否',
value:0
}]
3、this.$enum.getValueDesc('NOTICE_STATUS')
{
1:'是',
0:'否'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
作者简介: 卓大 (opens new window), 1024创新实验室主任,混迹于各个技术圈,熟悉点java,略懂点前端。
![]() | ![]() | ![]() |
加“卓大”微信,入群 | 关注 1024创新实验室! | 我要请 1024创新实验室 喝胡辣汤~ |