Element Plus DaisyUI 组件库

基于 Vue 3 + Element Plus API + daisyUI 视觉风格的组件库。

特性

• ✅ 100% Element Plus API 兼容
• ✅ 100% daisyUI 视觉风格
• ✅ 支持 25 个主题
• ✅ TypeScript 支持
• ✅ 按需引入
• ✅ 多语言支持（i18n）

安装

npm install @macroui/macroui

使用

全局注册（推荐）

import { createApp } from 'vue'
import App from './App.vue'
import 'daisyui/dist/full.css'
import Macroui from '@macroui/macroui'

const app = createApp(App)
app.use(Macroui)
app.mount('#app')

按需引入

import { ElButton, ElInput, ElSelect } from '@macroui/macroui'
import 'daisyui/dist/full.css'

app.component('el-button', ElButton)
app.component('el-input', ElInput)
app.component('el-select', ElSelect)

🌍 多语言

全局配置

import { ElConfigProvider } from '@macroui/macroui'
import { zhCn, en } from '@macroui/macroui/locale'

app.use(ElConfigProvider, { locale: zhCn })

组件内使用

import { useLocale } from '@macroui/macroui'

const { t } = useLocale()

// 使用翻译键
t('pagination.total', { total: 100 })  // 输出：共 100 条
t('select.placeholder')  // 输出：请选择

支持的语言

| 语言 | 代码 | 状态 | |------|------|------| | 简体中文 | zh-cn | ✅ 已完成 | | English | en | ✅ 已完成 |

主题

支持 daisyUI 全部 25 个主题：

// 切换主题
document.documentElement.setAttribute('data-theme', 'dark')

主题列表：

• light, dark, corporate, business, cmyk, acid, aqua, autumn
• black, coffee, cupcake, cyberpunk, dracula, emeral, fantasy
• forest, garden, halloween, jungle, lofi, luxury, night
• pastel, retro, synthwave, valentine, wireframe, zenith

组件列表

表单组件

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElButton | 按钮 | button | | ElInput | 输入框 | input | | ElSelect | 选择器 | select | | ElCheckbox | 多选框 | checkbox | | ElRadio | 单选框 | radio | | ElSwitch | 开关 | toggle | | ElTag | 标签 | badge | | ElForm | 表单 | form | | ElInputNumber | 数字输入 | - | | ElSlider | 滑块 | - | | ElRate | 评分 | - |

数据展示

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElBadge | 徽章 | badge | | ElProgress | 进度条 | progress | | ElAvatar | 头像 | avatar | | ElSkeleton | 骨架屏 | skeleton | | ElTable | 表格 | table | | ElEmpty | 空状态 | - | | ElResult | 结果页 | - |

反馈组件

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElAlert | 警告提示 | alert | | ElLoading | 加载状态 | loading | | ElMessage | 消息提示 | toast | | ElNotification | 通知 | toast |

容器组件

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElCard | 卡片 | card | | ElCollapse | 折叠面板 | collapse | | ElDialog | 对话框 | modal | | ElDrawer | 抽屉 | - |

导航组件

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElBreadcrumb | 面包屑 | breadcrumb | | ElPagination | 分页 | pagination | | ElSteps | 步骤条 | steps | | ElDropdown | 下拉菜单 | dropdown | | ElMenu | 菜单 | menu | | ElTabs | 标签页 | tabs | | ElPageHeader | 页头 | - |

布局组件

| 组件 | 说明 | DaisyUI | |------|------|--------| | ElDivider | 分割线 | divider | | ElTooltip | 文字提示 | tooltip | | ElContainer | 容器 | - | | ElSpace | 间距 | - |

开发

# 安装依赖
npm install

# 启动示例页面（推荐）
npm run dev:examples

# 构建库
npm run build:lib

# 运行测试
npm run test

# 代码检查
npm run lint

# TypeScript 检查
npm run typecheck

示例页面

启动示例页面后，访问 http://localhost:3000/ 可以查看所有组件的示例演示。

启动命令：npm run dev:examples

注意：示例页面使用 3000 端口，如果端口被占用，Vite 会自动选择其他端口。

NPM 发布

# 设置认证 Token（2FA 账户必须）
npm config set //registry.npmjs.org/:_authToken=YOUR_GRANULAR_TOKEN

# 发布包
npm publish --access public

许可证

MIT License