enum-vue

前端常量 枚举工具

项目基于 https://github.com/1024-lab/vue-enum.git

一、安装及初始化

安装

npm i enum-vue

初始化（定义枚举对象）

import Enum from 'enum-vue'
import Vue from "vue"

const enumInfo = {
  // 订单状态
  ORDER_STATUS: {
    WAIT_BUYER_PAY: {
      value: 'WAIT_BUYER_PAY',
      desc: '等待买家付款'
    },
    WAIT_SELLER_SEND_GOODS: {
      value: 'WAIT_SELLER_SEND_GOODS',
      desc: '等待卖家发货,即:买家已付款'
    },
    WAIT_BUYER_CONFIRM_GOODS: {
      value: 'WAIT_BUYER_CONFIRM_GOODS',
      desc: '等待买家确认收货,即:卖家已发货'
    },
    TRADE_FINISHED: {
      value: 'TRADE_FINISHED',
      desc: '交易成功'
    }
  }
}

Vue.use(Enum, { enumInfo })

二、使用

获取所有枚举Key列表

this.$enum.key

// result
{ "ORDER_STATUS": "ORDER_STATUS" }

根据枚举值获取描述（表格列表渲染中枚举值转换描述）

row.orderStatus = ‘TRADE_FINISHED’
this.$enum.getDescByValue('ORDER_STATUS', row.orderStatus)
// 或
this.$enum.getDescByValue(this.$enum.key.ORDER_STATUS, row.orderStatus)

// result
交易成功

获取键值对数组（下拉列表渲染中根据类型获取键值对）

this.$enum.getValueDescList(this.$enum.key.ORDER_STATUS)

// result
[{
  value: 'WAIT_BUYER_PAY',
  desc: '等待买家付款'
}, {
  value: 'WAIT_SELLER_SEND_GOODS',
  desc: '等待卖家发货,即:买家已付款'
}, {
  value: 'WAIT_BUYER_CONFIRM_GOODS',
  desc: '等待买家确认收货,即:卖家已发货'
}, {
  value: 'TRADE_FINISHED',
  desc: '交易成功'
}]

<select>
  <option
    v-for="(item,index) in $enum.getValueDescList(this.$enum.key.ORDER_STATUS)"
    :value="item.value"
    :key="index"
  >{{ item.desc }}
  </option>
</select>

根据枚举名称获取对应值与描述键值对

this.$enum.getValueDesc(this.$enum.key.ORDER_STATUS)

// result
{
  WAIT_BUYER_PAY: '等待买家付款',
  WAIT_SELLER_SEND_GOODS: '等待卖家发货,即:买家已付款',
  WAIT_BUYER_CONFIRM_GOODS: '等待买家确认收货,即:卖家已发货',
  TRADE_FINISHED: '交易成功'
}