博客

人生若只如初见，便是虚伪又热情

代码放在

https://gitee.com/siumu/blog_code.git



我们在后端总是用枚举来定义一些不变的数据，但是前端怎么实现枚举这种东西呢？我也是参考网上的各种方案，整理出来一种简单易懂，感觉应该还可以用的方案。

我们就以性别枚举为例，写一个出来，在后端性别枚举是这样定义的：

/**
 * 性别枚举
 */
@Getter
public enum Gender {

    UNKNOWN(0, "未知"),
    MALE(1, "男"),
    FEMALE(2, "女");

    Gender(Integer code, String desc) {
        this.code = code;
        this.desc = desc;
    }

    @JsonValue
    @EnumValue
    private final Integer code;

    private final String desc;  
}

在前端是这样定义的

// 判断是不是一个函数
import { isFunction } from '@/utils/validate'

/**
 * 性别枚举
 * 未知
 * 男
 * 女
 */
const GenderEnum = {

    UNKNOWN: {
        label: '未知',
        value: 0
    },
    MALE: {
        label: '男',
        value: 1
    },
    FEMALE: {
        label: '女',
        value: 2
    },

    /**
     * 获取所有的枚举，排除函数
     * @return {*[]}枚举数组
     */
    allEnums() {
        let enums = []
        for (let key in GenderEnum) {
            if (!isFunction(GenderEnum[key])) {
                enums.push(GenderEnum[key])
            }
        }
        return enums
    },
    /**
     * 根据 label 获取 枚举
     * @param label label
     * @return {*} 对应的枚举
     */
    getEnumByLabel(label) {
        for (let key in GenderEnum) {
            if (GenderEnum[key].label === label) {
                return GenderEnum[key]
            }
        }
        return {}
    },

    /**
     * 根据 label 获取 枚举
     * @param value value
     * @return {*} 对应的枚举
     */
    getEnumByValue(value) {
        for (let key in GenderEnum) {
            if (GenderEnum[key].value === value) {
                return GenderEnum[key]
            }
        }
        return {}
    }
}
// 设置当前对象只读
Object.freeze(GenderEnum)
export default GenderEnum

枚举应用

这个枚举怎么使用呢？

<template>
<div class="ml-2em">
  <h1>前端枚举的实现:</h1>
  <div class="is-flex el-row--flex">
    <el-select v-model="gender" clearable>
      <el-option v-for="(item,index) in GenderEnum.allEnums()" :key="index" :value="item.value" :label="item.label" />
    </el-select>
    <p class="ml-2em">
      <span>选中的值：value = </span>
      <span style="color: red">{{gender}}</span>
      <span class="ml-2em">label = </span>
      <span class="el-button--text">{{ GenderEnum.getEnumByValue(gender).label }}</span>
    </p>
  </div>
</div>
</template>
<script>
import GenderEnum from "@/enums/GenderEnum";
export default {
  name: "index",
  data(){
    return {
      gender: null,
      GenderEnum
    }
  }
}
</script>

代码放在

https://gitee.com/siumu/blog_code.git