@macroui/mui-vue
v0.1.0
Published
macroui/mui-vue - Vue 3 component library built on @macroui/mui (daisyui-compatible CSS). Designed for H5, with uni-app x compatibility path via macroui-mui-uvue.
Maintainers
mobiuiReadme
@macroui/mui-vue
基于
@macroui/mui（daisyui 兼容基础库）的 Vue 3 业务组件库 提供 5 个核心组件：Button / Card / Cell / Modal / Navbar 设计 API 参考 Element Plus，底层样式 100% 走 daisyui className
安装
npm install @macroui/mui-vue @macroui/mui必须同时安装
@macroui/mui，因为它提供 daisyui 全量 CSS（macroui-vue 的组件只组合 className，不带样式）。
引入样式
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@macroui/mui/dist/full.css' // 必须：daisyui 全量样式
// 或使用更小的 themes.css + 自定义 daisyui 主题
import { createMui } from '@macroui/mui-vue'
const app = createApp(App)
app.use(createMui)
app.mount('#app')5 个核心组件
MuiBtn
<template>
<MuiBtn type="primary" @click="onSubmit">主要按钮</MuiBtn>
<MuiBtn type="success" size="lg" shape="wide">大号宽按钮</MuiBtn>
<MuiBtn type="error" variant="outline" icon="✕">带图标</MuiBtn>
<MuiBtn type="primary" loading>加载中</MuiBtn>
</template>Props：
type:primary | secondary | accent | info | success | warning | error | ghost | link | neutralsize:xs | sm | md | lg（默认 md）variant:solid | outline | ghostshape:default | circle | square | wide | blockdisabled / loading / icon（emoji 或 unicode）
Emits：click
MuiCard
<template>
<MuiCard title="卡片标题" shadow="lg" bordered>
<p>主体内容</p>
<template #footer>
<MuiBtn type="primary" size="sm">操作</MuiBtn>
</template>
</MuiCard>
</template>Props：shadow (none/sm/md/lg/xl) · padding (none/sm/md/lg) · bordered · bg (base-100/200/300) · title
Slots：default / header / footer
MuiCell
<template>
<MuiCell title="标题" label="副标题" value="右侧值" arrow clickable @click="onClick" />
<MuiCell title="带图标" icon="★" value="100" arrow />
</template>Props：title / label / value / icon / arrow / border / clickable / bg
Slots：default / icon / value / right
MuiModal
<template>
<MuiModal v-model="show" title="提示" size="md" @close="onClose">
<p>模态框主体</p>
<template #footer>
<MuiBtn type="ghost" @click="show = false">取消</MuiBtn>
<MuiBtn type="primary" @click="onConfirm">确认</MuiBtn>
</template>
</MuiModal>
</template>Props：modelValue (v-model) · title · size (sm/md/lg/xl/full) · position (middle/top) · backdrop
Emits：update:modelValue / close
MuiNavbar
<template>
<MuiNavbar title="页面标题" back :auto-back="true">
<template #right>
<MuiBtn type="primary" size="sm">操作</MuiBtn>
</template>
</MuiNavbar>
</template>Props：title / back / autoBack / fixed / bordered / bg (base-100/base-200/transparent)
Slots：default / left / right / action
Emits：back
多主题
通过 <html data-theme="client"> 切换 6 套预设主题（client / technician / admin / medical / fitness / massage）。所有组件颜色自动跟随主题。
uni-app x 兼容
macroui-mui-vue 与 macroui-mui-uvue（uni-app x UVUE 版组件库）API 一一对应。如需在小程序/App 端使用，把 .vue 组件转换为 .uvue（UTS 类型）即可，详见 macroui-mui-uvue/components/。
依赖关系
@macroui/mui-vue (本包 · Vue 3 · H5 优先)
↓ deps: "@macroui/mui"
@macroui/mui (npm public · 4.3.2 · daisyui 全量 CSS)
↓ 上游
@macroui/macroui (npm public · 4.3.2 · daisyui 兼容基础库)许可
MIT