我自己觉得比较优雅的前端枚举组件方法

83 阅读1分钟

        众所周知,前端项目中尽量少写数字,但是后端返回的状态枚举又经常是数字,那么前端在定义枚举的时候通常需要定义枚举,定义对应的文案。如果还需要使用options,需要自己再次对枚举进行封装。

export const question_type_status = {  
  multiple: 1,  
  radio: 2,  
  judge: 3,
};
export const question_type = {  
  [question_type_status.multiple]: '多选题',  
  [question_type_status.radio]: '单选题',  
  [question_type_status.judge]: '判断题',
};

自己写一个方法,如果没有处理好里面的一些逻辑,就没有对应的ts提示功能。

为了应对上面的各种不适,createEnum的出现解决了这个问题。

idx是用于生成options的排序,如果不需要特殊排序,完全可以不用写的。

最后的 as const 一定要写,不然提示的时候,只能提示出对应的类型

// 定义方式const verifyStatusEnum = createEnum({
    wait: {
        label: "等待",
        value: 0,
        idx: 1,
    },
    pass: {
        label: "通过",
        value: 1,
        idx: 2,
    },
    reject: {
        label: "拒绝",
        value: 2,
        idx: 3,
    },
    init: {
        label: {
            text: "支付取消",
            status: "Success",
        },
        value: 3,
        idx: 4,
    },
} as const);

createEnum是使用ts进行开发的,所以在createEnum之后,生成 verifyStatusEnum 的在使用时,会有对应值的提示。

demo:

// result -> 0
verifyStatusEnum.wait

// result -> 等待
verifyStatusEnum.waitName

// result -> { wait: '等待', pass: '通过', reject: '拒绝', init: { text: '支付取消', status: 'Success' } }
verifyStatusEnum.enum

// result -> { wait: '等待', pass: '通过', reject: '拒绝', init: '支付取消' }
verifyStatusEnum.textEnum

/**
 *
[
  { label: '等待', value: 0, idx: 1 },
  { label: '通过', value: 1, idx: 2 },
  { label: '拒绝', value: 2, idx: 3 },
  { label: { text: '支付取消', status: 'Success' }, value: 3, idx: 4 }
]
 */
verifyStatusEnum.options

组件地址:www.npmmirror.com/package/@ho…