MpUI (Mini-program's UI for mpvue)

原 weui-mpvue

MpUI 是一套基于 weui-wxss 开发的 mpvue 组件库，增加了一些新的特性、样式和组件。

说明

部分组件因 mpvue 尚不支持的语法而无法实现，详细见不支持列表。

开发文档

打开开发文档

安装

$ yarn add mpui

预览

$ git clone https://github.com/kankungyip/mpui
$ cd mpui
$ yarn run example

用微信web开发者工具打开 mpui 项目目录。

使用

引入全局样式

<style lang="less">
@import "path/to/node_modules/mpui/theme/mpui";
</style>

并非全部组件样式，仅全局（字体、颜色等）样式和未被 Vue 组件化的 weui-wxss。

使用组件

<template>
  <ui-article :content="content" />
</template>

<script>
import uiArticle from 'mpui/components/article'

export default {
  components: {
    uiArticle,
  },

  data () {
    return {
      content: `# 大标题

## 章标题

### 1.1 节标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

![](https://mp.weixin.qq.com/wxopen/qrcode?action=show&type=2&fakeid=3834027984&token=2071919981)

### 1.2 节标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`,
    }
  },
}
</script>

需要 Slot 支持暂未实现的组件，请使用全局样式，详细见文档。

组件状态

部分组件样式源自 zanui 和 minui 项目，并对其进行了必要重构以符合 weui-wxss。

表单

• [x] Agree
• [x] Button
• [ ] ButtonArea（需要 Slot 支持，暂使用样式）
• [ ] List（需要 Slot 支持，暂使用样式）
• [x] Cell（需配合 List 一起使用）
• [x] Input（需配合 List 一起使用）
• [x] CheckboxGroup（需配合 List 一起使用）
• [x] RadioGroup（需配合 List 一起使用）
• [x] Select（需配合 List 一起使用）
• [x] Switch（需配合 List 一起使用）
• [x] Uploader（可配合 List 一起使用）
• [x] Counter（可配合 List 一起使用）

基础组件

• [x] Icons
• [x] Article
• [x] Avatar
• [x] Badge
• [ ] BadgeBox（需要 Slot 支持，暂使用样式）
• [ ] Row（需要 Slot 支持，暂使用样式）
• [ ] Col（需要 Slot 支持，暂使用样式）
• [x] Grid
• [ ] Panel（需要 Slot 支持，暂使用样式）
• [x] MediaBox（可配合 Panel 一起使用）
• [x] Footer
• [x] Loadmore
• [x] Ellipsis
• [x] Preview
• [x] Price
• [x] Progress
• [x] Tag
• [ ] Timeline
• [ ] Countdown

操作反馈

• [x] LoadingBar
• [x] Msg
• [ ] NoticeBar
• [x] Toptips

导航相关

• [ ] Tabs（需要 Slot 支持，暂使用样式）
• [ ] Sidenav
• [x] Steps

搜索相关

• [x] SearchBar

计划

• [ ] 为表单引入独立 API vm.$form，方便表单数据的获取和校验
• [ ] 支持 i18n

License

The MIT License

请自由地享受和参与开源