面向 Vue 3 的轻量移动端 UI 组件库，包含按钮、图标、图片和加载组件。

安装

pnpm add @mingto/mini-ui

也可以使用 npm 或 yarn：

npm install @mingto/mini-ui

yarn add @mingto/mini-ui

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

快速开始

全量引入

import MiniUi from '@mingto/mini-ui'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

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

按需引入

<template>
  <mini-button type="primary">
    提交
  </mini-button>
  <mini-icon
    name="icon-Frame8"
    :size="24"
    color="#1677ff"
  />
  <mini-image
    src="/demo.png"
    width="120"
    height="120"
  />
  <mini-loading text="加载中" />
</template>

组件列表

组件	说明
MtButton	按钮组件，支持类型、尺寸、加载、禁用、块级、圆角等状态
MtIcon	图标组件，基于内置 iconfont 图标类名渲染
MtImage	图片组件，支持加载中、加载失败和错误插槽
MtLoading	加载组件，支持旋转和点状两种加载动画

API

MtButton

Props

参数	类型	默认值	说明
type	'default' | 'primary' | 'error' | 'success' | 'noble'	'default'	按钮外观风格
size	'normal' | 'small' | 'large'	'normal'	按钮尺寸
width	number | string	'auto'	按钮宽度
height	number | string	'auto'	按钮高度
round	boolean	false	是否为圆角按钮
circle	boolean	false	是否为圆形按钮
loading	boolean	false	是否处于加载状态
disabled	boolean	false	是否禁用
text	boolean	false	是否为文字按钮
block	boolean	false	是否为块级按钮
plain	boolean	false	是否为朴素按钮
nativeType	'button' | 'submit' | 'reset'	'button'	原生 button 的 type 属性

Events

事件名	参数	说明
click	MouseEvent	点击按钮时触发，disabled 或 loading 为 true 时不会触发有效点击

Slots

插槽名	说明
default	按钮内容
icon	按钮图标区域，loading 为 true 时默认显示 MtLoading

MtIcon

Props

参数	类型	默认值	说明
name	string	-	图标类名，必须是内置 iconfont 中存在的类名
size	number | string	'inherit'	图标大小。数字会按 px 处理，也可传入合法 CSS 值
color	string	'inherit'	图标颜色
rotate	number	0	图标旋转角度，单位为 deg

MtImage

Props

参数	类型	默认值	说明
src	string	''	图片地址
width	number | string	'100%'	图片宽度
height	number | string	'100%'	图片高度
fit	'fill' | 'contain' | 'cover' | 'none' | 'scale-down'	'cover'	图片填充模式，对应 CSS object-fit

Events

事件名	参数	说明
load	-	图片加载成功时触发
error	-	图片加载失败时触发

Slots

插槽名	说明
error	图片加载失败时展示的内容

MtLoading

Props

参数	类型	默认值	说明
type	'spinner' | 'dots'	'spinner'	加载动画类型
size	number	42	加载动画大小
text	string	''	加载文本

Slots

插槽名	说明
default	自定义加载文本内容

使用示例

按钮状态

<template>
  <mini-button
    type="primary"
    size="large"
    block
  >
    主按钮
  </mini-button>
  <mini-button
    type="success"
    plain
  >
    成功按钮
  </mini-button>
  <mini-button
    type="error"
    loading
  >
    提交中
  </mini-button>
</template>

图片错误状态

<template>
  <mini-image
    src="/not-found.png"
    width="120"
    height="120"
  >
    <template #error>
      图片加载失败
    </template>
  </mini-image>
</template>

加载状态

<template>
  <mini-loading
    type="spinner"
    text="加载中"
  />
  <mini-loading type="dots">
    请稍候
  </mini-loading>
</template>

注意事项

1. MtIcon 的 name 必须是组件库内置 iconfont 中存在的图标类名。
2. MtButton 在 loading 状态下会禁用点击。
3. MtButton / MtImage 的 width / height 接受数字或合法 CSS 值，数字会按设计视口宽度（375px）自动转为 vw。
4. MtIcon 的 size 接受数字或 'inherit'；数字会按 px 处理，不会转 vw。
5. MtImage 在 src 变化时会重新进入加载流程。