Element Plus DaisyUI 组件库

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

特性

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

安装

npm install element-plus-daisyui

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import 'daisyui/dist/full.css'
import ElementPlusDaisyUI from 'element-plus-daisyui'

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

按需引入

import { ElButton, ElInput, ElSelect } from 'element-plus-daisyui'
import 'daisyui/dist/full.css'

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

组件列表

表单组件

| 组件 | 说明 | 文档 | |------|------|------| | ElButton | 按钮 | daisyUI Button | | ElInput | 输入框 | daisyUI Input | | ElSelect | 选择器 | daisyUI Select | | ElCheckbox | 多选框 | daisyUI Checkbox | | ElRadio | 单选框 | daisyUI Radio | | ElSwitch | 开关 | daisyUI Toggle | | ElTag | 标签 | daisyUI Badge | | ElForm | 表单 | daisyUI Form |

数据展示

| 组件 | 说明 | 文档 | |------|------|------| | ElBadge | 徽章 | daisyUI Badge | | ElProgress | 进度条 | daisyUI Progress | | Avatar | 头像 | daisyUI Avatar | | ElSkeleton | 骨架屏 | daisyUI Skeleton |

反馈

| 组件 | 说明 | 文档 | |------|------|------| | ElAlert | 警告提示 | daisyUI Alert | | ElLoading | 加载状态 | daisyUI Loading | | ElMessage | 消息提示 | daisyUI Toast | | ElNotification | 通知 | daisyUI Toast |

容器

| 组件 | 说明 | 文档 | |------|------|------| | ElCard | 卡片 | daisyUI Card | | ElCollapse | 折叠面板 | daisyUI Collapse | | ElDialog | 对话框 | daisyUI Modal |

导航

| 组件 | 说明 | 文档 | |------|------|------| | ElBreadcrumb | 面包屑 | daisyUI Breadcrumb | | ElPagination | 分页 | daisyUI Pagination | | ElSteps | 步骤条 | daisyUI Steps | | ElDropdown | 下拉菜单 | daisyUI Dropdown | | ElMenu | 菜单 | daisyUI Menu | | ElTabs | 标签页 | daisyUI Tabs |

布局

| 组件 | 说明 | 文档 | |------|------|------| | ElDivider | 分割线 | daisyUI Divider | | ElTooltip | 文字提示 | daisyUI Tooltip | | ElTable | 表格 | daisyUI Table |

主题

支持 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

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

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

# 构建
npm run build

# 构建库
npm run build:lib

示例页面

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

启动命令：npm run dev:examples

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

许可证

MIT License