mini-ui 移动端组件

适配 H5 / WebView 的轻量 Vue 3 组件集，对应 npm 包 @mingto/mini-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')

按需引入

<script setup lang="ts">
import { MtButton, MtIcon, MtImage, MtLoading } from '@mingto/mini-ui'
</script>

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

导出

import MiniUi, { MtButton, MtIcon, MtImage, MtLoading } from '@mingto/mini-ui'

包主入口默认导出 Vue 插件，同时导出四个可按需注册的组件。

注意事项

• 组件基于 Vue 3，依赖 vue@^3.5.13，不兼容 Vue 2。
• MtIcon 的 name 必须是组件库内置 iconfont 中存在的图标类名。
• MtButton 在 loading 状态下会禁用点击。
• width、height、size 等尺寸参数支持数字或合法 CSS 值，数字会按组件内部移动端适配规则转换。
• MtImage 在 src 变化时会重新进入加载流程。