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。
-
Agree
-
Button
-
ButtonArea
(需要 Slot 支持,暂使用样式) -
List
(需要 Slot 支持,暂使用样式) -
Cell
(需配合List
一起使用) -
Input
(需配合List
一起使用) -
CheckboxGroup
(需配合List
一起使用) -
RadioGroup
(需配合List
一起使用) -
Select
(需配合List
一起使用) -
Switch
(需配合List
一起使用) -
Uploader
(可配合List
一起使用) -
Counter
(可配合List
一起使用)
-
Icons
-
Article
-
Avatar
-
Badge
-
BadgeBox
(需要 Slot 支持,暂使用样式) -
Row
(需要 Slot 支持,暂使用样式) -
Col
(需要 Slot 支持,暂使用样式) -
Grid
-
Panel
(需要 Slot 支持,暂使用样式) -
MediaBox
(可配合Panel
一起使用) -
Footer
-
Loadmore
-
Ellipsis
-
Preview
-
Price
-
Progress
-
Tag
-
Timeline
-
Countdown
-
LoadingBar
-
Msg
-
NoticeBar
-
Toptips
-
Tabs
(需要 Slot 支持,暂使用样式) -
Sidenav
-
Steps
-
SearchBar
- 为表单引入独立 API
vm.$form
,方便表单数据的获取和校验 - 支持 i18n
请自由地享受和参与开源