@mingto/mt-ui

基于 Vue 3 的 UI 组件库，提供业务常用组件、布局组件、反馈组件、上传组件、国际化和工具 Hook。

安装

pnpm add @mingto/mt-ui

需要项目中已安装 Vue 3，当前 peer dependency 为 vue@^3.5.13。

快速开始

全量引入

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

const app = createApp(App)

app.use(MtUi)
app.mount('#app')

按需引入

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

const app = createApp(App)

app.use(MtButton)
app.use(MtDialog)
app.use(MtMessage)
app.mount('#app')

在 setup 中使用

<script setup lang="ts">
import { MtMessage } from '@mingto/mt-ui'

function submit() {
  MtMessage.success('操作成功')
}
</script>

<template>
  <MtButton type="primary" @click="submit">
    提交
  </MtButton>
</template>

组件列表

基础组件

| 组件 | 说明 | |------|------| | MtButton | 按钮 | | MtButtonGroup | 按钮组 | | MtDivider | 分割线 | | MtIcon | 图标 | | MtImage | 图片 | | MtLoading | 加载 | | MtBadge | 徽标 | | MtBacktop | 回到顶部 | | MtRadio | 单选框 | | MtRadioGroup | 单选框组 | | MtRadioButton | 按钮样式的单选框 | | MtTypography | 排版容器 | | MtText | 文本 | | MtTitle | 标题 | | MtParagraph | 段落 |

展示组件

| 组件 | 说明 | |------|------| | MtAvatar | 头像 | | MtAvatarGroup | 头像组 | | MtAvatarImage | 图片头像 | | MtAvatarText | 文字头像 | | MtEmpty | 空状态 | | MtFilePreview | 文件预览 | | MtPopover | 气泡卡片 | | MtProgress | 进度条 | | MtQrcode | 二维码 | | MtScrollbar | 滚动条 | | MtSkeleton | 骨架屏 | | MtSkeletonItem | 骨架屏单项 | | MtTable | 表格 | | MtTableColumn | 表格列 | | MtTag | 标签 | | MtTooltip | 文字提示 |

导航组件

| 组件 | 说明 | |------|------| | MtDropdown | 下拉菜单 | | MtMenu | 菜单 | | MtMenuItem | 菜单项 | | MtTabs | 标签页容器 | | MtTab | 标签页项 | | MtInfiniteScroll | 无限滚动 |

反馈组件

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

布局与过渡组件

| 组件 | 说明 | |------|------| | MtCell | 单元格 | | MtCellGroup | 单元格组 | | MtCollapseTransition | 折叠过渡 | | MtFadeTransition | 淡入淡出过渡 | | MtTeleport | 传送门 | | MtConfigProvider | 全局配置 | | MtFlex | 弹性布局 | | MtSpace | 间距 |

表单与上传组件

| 组件或方法 | 说明 | |------------|------| | MtForm | 表单容器 | | MtFormItem | 表单项（布局与校验） | | MtInput | 输入框 | | MtTextarea | 文本域 | | MtInputNumber | 数字输入框 | | MtSelect | 选择器 | | MtOption | 选择器选项 | | MtAutocomplete | 自动补全输入框 | | MtCascader | 级联选择器 | | MtCascaderPanel | 级联面板 | | MtCheckbox | 多选框 | | MtCheckboxGroup | 多选框组 | | MtCheckboxButton | 按钮样式的多选框 | | MtSwitch | 开关 | | MtSlider | 滑块 | | MtRate | 评分 | | MtTransfer | 穿梭框 | | MtFilePicker | 文件选择器 | | MtUpload | 上传组件 | | MtUploadFileListLayout | 上传文件列表布局 | | MtUploadImageGridLayout | 上传图片宫格布局 | | MtUploadImageOnlyLayout | 仅图片上传布局 | | formatUploadFiles | 格式化上传文件数据 |

常用示例

按钮

<template>
  <MtButton type="primary">
    主要按钮
  </MtButton>
  <MtButton type="success">
    成功按钮
  </MtButton>
  <MtButton type="danger">
    危险按钮
  </MtButton>
</template>

对话框

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

消息提示

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

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

上传

<template>
  <MtUpload v-model="fileList" :limit="9">
    <MtButton type="primary">
      点击上传
    </MtButton>
  </MtUpload>
</template>

全局配置

<template>
  <MtConfigProvider :locale="{ lang: 'en' }">
    <App />
  </MtConfigProvider>
</template>

其它导出

import { iconfontJson } from '@mingto/mt-ui'
import { useLocale } from '@mingto/mt-ui'

包内同时导出 hooks 与 locale 模块，可按需从主入口导入使用。

许可证

ISC