@mingto/mt-ui

基于 Vue 3 的企业级 UI 组件库，提供丰富的业务组件，帮助快速构建现代化应用界面。

特性

• 🎨 设计优雅：简洁现代的视觉风格
• 📦 开箱即用：无需复杂配置，直接引入使用
• 🔧 按需加载：支持组件按需引入，优化打包体积
• 🎯 类型安全：完整的 TypeScript 类型定义
• 🌏 国际化：内置多语言支持

安装

pnpm add @mingto/mt-ui

快速开始

全量引入

import { createApp } from 'vue'
import App from './App.vue'
import MtUi from '@mingto/mt-ui'
import '@mingto/mt-ui/dist/style.css'

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

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { MtButton, MtDialog, MtMessage } from '@mingto/mt-ui'
import '@mingto/mt-ui/dist/style.css'

const app = createApp(App)
app.use(MtButton)
app.use(MtDialog)
app.use(MtMessage)
app.mount('#app')

基础组件

| 组件 | 说明 | |------|------| | MtButton | 按钮 | | MtIcon | 图标 | | MtImage | 图片 | | MtLoading | 加载 | | MtBadge | 徽标 | | MtBacktop | 回到顶部 |

表单组件

| 组件 | 说明 | |------|------| | MtUpload | 文件上传 | | MtProgress | 进度条 |

展示组件

| 组件 | 说明 | |------|------| | MtAvatarImage | 图片头像 | | MtAvatarText | 文字头像 | | MtEmpty | 空状态 | | MtTag | 标签 | | MtQrcode | 二维码 | | MtTable | 表格 | | MtTableColumn | 表格列 | | MtPopover | 气泡卡片 | | MtTooltip | 文字提示 | | MtFilePreview | 文件预览 |

导航组件

| 组件 | 说明 | |------|------| | MtTabs | 标签页 | | MtTab | 标签 | | MtInfiniteScroll | 无限滚动 |

反馈组件

| 组件 | 说明 | |------|------| | MtDialog | 对话框 | | MtMessage | 消息提示 | | MtOverlay | 遮罩层 | | MtPoster | 海报 |

布局组件

| 组件 | 说明 | |------|------| | MtCell | 单元格 | | MtCellGroup | 单元格组 | | MtButtonGroup | 按钮组 | | MtCollapseTransition | 折叠过渡 | | MtFadeTransition | 淡入淡出过渡 | | MtTeleport | 传送门 | | MtConfigProvider | 全局配置 |

使用示例

按钮

<mt-button type="primary">主要按钮</mt-button>
<mt-button type="success">成功按钮</mt-button>
<mt-button type="danger">危险按钮</mt-button>

对话框

<mt-dialog v-model="visible" title="标题">
  <p>对话框内容</p>
  <template #footer>
    <mt-button @click="visible = false">取消</mt-button>
    <mt-button type="primary" @click="visible = false">确定</mt-button>
  </template>
</mt-dialog>

消息提示

import { MtMessage } from '@mingto/mt-ui'

MtMessage.success('操作成功')
MtMessage.error('操作失败')
MtMessage.warning('警告提示')

文件上传

<mt-upload v-model="fileList" :limit="9">
  <mt-button type="primary">点击上传</mt-button>
</mt-upload>

全局配置

<mt-config-provider :locale="{ lang: 'en' }">
  <app />
</mt-config-provider>

完整文档

更多组件和详细用法请参考 官方文档

许可证

MIT