English | 中文 | CHANGELOG

支持平台

介绍 • 快速上手 • API文档 • 全局配置 • 典型用法 • 插件系统 • 本地化 • 全局扩展 • 最佳实践 • 兼容性 • 常见问题 • 查看完整API文档

为什么使用 enum-plus

原生 enum 很适合表达常量，但真实业务的运行时需求往往更多：

• 用户友好的显示名称
• 扩展颜色、图标、权限等元数据
• 渲染下拉框、复选框、菜单、表格筛选等 UI 组件
• 枚举值转换标签文本
• 渲染颜色徽章
• 国际化
• 枚举元数据查找
• 枚举值校验

enum-plus 保留了直观的枚举式使用体验，并把这些运行时能力收敛到同一个对象里。

这是一套完整的前端业务字典解决方案，更像是一个轻量级的数据源，通常被用作前端公共基础设施。

💡 想看看 enum-plus 能做什么，以及如何能提高前端开发效率？查看完整 Demo

特性

• 完全兼容原生 enum 的用法
• 支持number、string等多种数据类型
• 枚举项支持设置显示名称
• 支持国际化，可与任何 i18n 库集成
• 快速将值转换为显示名称，在 UI 回显时非常有用
• 枚举项支持扩展元数据字段，可以作为静态配置系统使用
• 支持插件体系，可以通过安装插件扩展枚举功能
• 支持数据类型约束，提高代码的类型安全性  TypeScript
• 枚举可以生成下拉框等 UI 组件，支持 Ant Design、Element Plus、Material-UI 等多种组件库
• 支持 Web浏览器、Node.js、React Native、Taro、小程序等多种环境
• 支持服务端渲染 (SSR)
• 兼容任何前端开发框架，支持无框架的纯原生项目
• 面向 TypeScript 设计，具有良好的类型推导和代码补全能力
• 零依赖项
• 轻量（gzip压缩后仅2KB+）

安装

npm install enum-plus

快速示例

import { Enum } from 'enum-plus';

const StatusEnum = Enum({
  Draft: { value: 1, label: '草稿', color: 'default' },
  Review: { value: 2, label: '审核中', color: 'processing' },
  Published: { value: 3, label: '已发布', color: 'success' },
});

StatusEnum.Review; // 2
StatusEnum.label(2); // '审核中'
StatusEnum.has(2); // true
StatusEnum.keys; // ['Draft', 'Review', 'Published']
StatusEnum.values; // [1, 2, 3]
StatusEnum.labels; // ['草稿', '审核中', '已发布']
StatusEnum.items; // [{ key: 'Draft', value: 1, label: '草稿', color: 'default' }, ...]
StatusEnum.named.Draft; // { key: 'Draft', value: 1, label: '草稿', color: 'default' }
StatusEnum.item(1); // { key: 'Draft', value: 1, label: '草稿', color: 'default' }
StatusEnum.meta; // { color: [ 'default', 'processing', 'success' ] }
StatusEnum.findBy('color', 'success'); // { key: 'Published', value: 3, label: '已发布', color: 'success' }
StatusEnum.toList({ valueField: 'id', labelField: 'name' }); // [{ id: 1, name: '草稿' }, ...]
StatusEnum.toMap({ keySelector: 'key', valueSelector: 'value' }); // { Draft: 1, Review: 2, Published: 3 }

国际化

import i18nPlugin from '@enum-plus/plugin-i18next';
import { Enum } from 'enum-plus';

Enum.install(i18nPlugin);

const StatusEnum = Enum({
  Draft: { value: 1, label: 'locales.enums.statusEnum.draft' },
  Review: { value: 2, label: 'locales.enums.statusEnum.review' },
  Published: { value: 3, label: 'locales.enums.statusEnum.published' },
});

StatusEnum.labels; // ['Draft', 'In Review', 'Published'] 或者 ['草稿', '审核中', '已发布']
StatusEnum.label(2); // 'In Review' 或者 '审核中'
StatusEnum.named.Review.label; // 'In Review' 或者 '审核中'

插件生态

• @enum-plus/plugin-react
• @enum-plus/plugin-react-i18next
• @enum-plus/plugin-i18next
• @enum-plus/plugin-i18next-vue
• @enum-plus/plugin-vue-i18n
• @enum-plus/plugin-next-international
• @enum-plus/plugin-antd

支持

如果这个项目对你有帮助，请给它一个 GitHub 星标 ⭐️，这将鼓励我们继续开发和维护这个项目。