vue-enum-plus

前端常量 枚举工具

一、安装及初始化方法

1. npm install vue-enum-plus --save  / yarn add vue-enum-plus
2. 按以下格式定义您的枚举对象

let enumInfo = {
    MESSAGE_TYPE: {
        SYSTEM_TYPE: {
            value: 1,
            desc: '系统',
            color: '#fff'
        },
        MEETING_TYPE: {
            value: 2,
            desc: '会议',
            color: '#000'
        }
    }
}
3. import Enum from 'vue-enum-plus'
4. Vue.use(Enum,{enumInfo})

二、使用方法

目前插件提供四个方法

可在全局使用 this.$Enum.getDesc() 、this.$Enum.getObj() 、this.$Enum.getList() 、getValueDesc() 调用

根据枚举值获取描述 示例：

在表格渲染时经常遇到需要将状态转换成描述的情况,此时可以使用

params.row.type=1
this.$Enum.getDesc('MESSAGE_TYPE', params.row.type) //会议类型 返回值是desc
this.$Enum.getObj('MESSAGE_TYPE', params.row.type) //会议类型 返回值是{value: 1,desc: '系统',color: '#fff'}

下拉菜单经常需要使用键值对来渲染 select 的 option [{value:desc}]

let typeList =this.$Enum.getList('MESSAGE_TYPE')
//[
    {value: 1, desc: "系统", color: '#fff'},
    {value: 2, desc: "会议", color: '#000'}
   ]

   <Select>
       <Option
           v-for="(item,index) in typeList"
           :value="item.value"
           :key="index"
       >{{item.desc}}</Option>
   </Select>

根据枚举名获取对应的 value 描述键值对{value:desc}

this.$Enum.getValueDesc('MESSAGE_TYPE')
//
{
    1:"系统",
    2:"会议"
}