@macroui/mui-uvue
v0.1.0
Published
macroui/mui-uvue - uni-app x (UVUE) business components built on @macroui/mui (daisyui-compatible CSS). Designed for H5/小程序/App.
Maintainers
mobiuiReadme
@macroui/mui-uvue
uni-app x (UVUE) 业务组件库，基于
@macroui/mui（daisyui 兼容基础库） 提供 5 个核心组件：MuiBtn / MuiCard / MuiCell / MuiModal / MuiNavbar 设计 API 参考 Element Plus，UTS 类型友好
安装
npm install @macroui/mui-uvue @macroui/mui配置 easycom（uni-app x 自动导入）
pages.json 中添加：
{
"easycom": {
"autoscan": true,
"custom": {
"^mui-(.*)": "@/uni_modules/@macroui/mui-uvue/components/mui-$1/mui-$1.uvue"
}
}
}或者把组件放到 uni_modules/ 目录下（HBuilderX 标准方式），即可零配置使用。
引入样式
在 App.uvue 中：
<script setup lang="uts">
import '@macroui/mui/dist/full.css'
</script>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 / size / variant / shape / disabled / loading / icon
Emits：click
MuiCard
<template>
<MuiCard title="卡片标题" shadow="lg" bordered>
<text>主体内容</text>
<template #footer>
<MuiBtn type="primary" size="sm">操作</MuiBtn>
</template>
</MuiCard>
</template>Props：shadow / padding / bordered / bg / 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">
<text>模态框主体</text>
<template #footer>
<MuiBtn type="ghost" @click="show = false">取消</MuiBtn>
<MuiBtn type="primary" @click="onConfirm">确认</MuiBtn>
</template>
</MuiModal>
</template>Props：modelValue / title / size / position / 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
Slots：default / left / right / action
Emits：back
autoBack=true时自动调用uni.navigateBack({ delta: 1 })，失败回退到首页。
单位说明
所有组件使用 rpx 单位（750rpx = 屏幕宽度）。H5 端 HBuilderX 自动转 px，小程序/App 端原生 rpx。
与 .vue 版本的对应关系
| .uvue（uni-app x） | .vue（H5 优先） |
|---|---|
| mui-btn/mui-btn.uvue | @macroui/mui-vue 中的 Button.vue |
| mui-card/mui-card.uvue | @macroui/mui-vue 中的 Card.vue |
| mui-cell/mui-cell.uvue | @macroui/mui-vue 中的 Cell.vue |
| mui-modal/mui-modal.uvue | @macroui/mui-vue 中的 Modal.vue |
| mui-navbar/mui-navbar.uvue | @macroui/mui-vue 中的 Navbar.vue |
两者 API 完全一致，跨端复用方便。
多主题
通过 <html data-theme="client"> 切换 6 套预设主题（client / technician / admin / medical / fitness / massage）。所有组件颜色自动跟随主题。
依赖关系
@macroui/mui-uvue (本包 · uni-app x UVUE)
↓ deps: "@macroui/mui"
@macroui/mui (npm public · 4.3.2)
↓ 上游
@macroui/macroui (npm public · 4.3.2)许可
MIT