Mango UI Components

Mango UI 是一个基于 Vue 3 的移动端组件库，专为 H5 应用设计。

TypeScript 支持

Mango UI 完整支持 TypeScript，提供完整的类型定义文件，可以在 TypeScript 项目中获得完整的类型检查和自动补全功能。

组件属性提示

在 TypeScript 项目中使用 Mango UI 组件时，您可以获得完整的属性提示和类型检查功能。这得益于我们为每个组件都提供了详细的类型定义。

例如，当您使用 MgButton 组件时，编辑器会自动提示可用的属性：

import { MgButton } from '@mango-ui/components'

export default {
  components: {
    MgButton
  },
  setup() {
    // 在模板中使用时，会获得属性提示
    // <MgButton type="primary" size="large">按钮</MgButton>
  }
}

对于按需引入的组件，同样可以获得完整的属性提示：

import { MgCard } from '@mango-ui/components'

export default {
  components: {
    MgCard
  },
  setup() {
    // 在模板中使用时，会获得属性提示
    // <MgCard shadow="hover">卡片内容</MgCard>
  }
}

通过使用 TypeScript 和 Mango UI，您可以获得更好的开发体验，减少错误并提高开发效率。

安装

npm install @mango-ui/components

使用

全量引入

import { createApp } from 'vue'
import MangoUI from '@mango-ui/components'
import '@mango-ui/components/style.css'

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

按需引入

方法一：使用解构赋值（推荐）

import { MgButton, MgCard } from '@mango-ui/components'
import '@mango-ui/components/style.css'

export default {
  components: {
    MgButton,
    MgCard
  }
}

方法二：直接引入组件文件

import MgButton from '@mango-ui/components/dist/button/src/button.vue'
import '@mango-ui/components/style.css'

export default {
  components: {
    MgButton
  }
}

注意：直接引入组件文件的方式可以更好地利用 Tree Shaking，减少打包体积。

组件列表

• Button 按钮
• Card 卡片
• Icon 图标
• Toast 轻提示

Tree Shaking

Mango UI 支持 Tree Shaking，这意味着在按需引入时，未使用的组件代码将不会被打包到最终的构建文件中，从而减少包体积。

为了更好地利用 Tree Shaking，建议使用 ES 模块语法进行按需引入：

import { MgButton } from '@mango-ui/components'

避免使用以下方式，因为它会导入整个库：

import * as MangoUI from '@mango-ui/components'

组件详情

Button

按钮组件用于触发一个操作。

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | type | 按钮类型 | string | primary/success/warning/danger/info | primary | | size | 按钮尺寸 | string | large/medium/small | medium | | disabled | 是否禁用 | boolean | - | false |

Card

卡片组件用于展示信息。

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | shadow | 卡片阴影显示时机 | string | always/hover/never | always |

Icon

图标组件用于显示图标。

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | name | 图标名称 | string | - | - | | size | 图标大小 | string/number | - | 16px | | color | 图标颜色 | string | - | currentColor |

Toast

轻提示组件用于显示简短的信息提示。

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | message | 提示文本 | string | - | - | | type | 提示类型 | string | success/fail/loading/text | text | | position | 提示位置 | string | top/middle/bottom | middle | | duration | 展示时长(ms) | number | - | 2000 |

方法

| 方法名 | 说明 | 参数 | | --- | --- | --- | | show | 展示提示 | options | | hide | 隐藏提示 | - |