枚举常量vue-enum

9/7/2021

# 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
<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

如果后端把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、在src目录下建立constants文件夹并建立index.js 将常量模块导出

constants/index.js 例:

import noticeConstantfrom './noticeConstant/index.js'
export default {
   ...noticeConstant,
}
1
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

# 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:'否'
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

加“卓大”微信,入群 关注 1024创新实验室! 我要请 1024创新实验室 喝胡辣汤~