Mp-lui NPM | npm.io

mp-lui

A Mpvue project

基于MpVue框架以及iview、lui库搭建的小程序UI组件库。

iview小程序项目地址：iview-weapp
mp-weui小程序项目地址：mp-weui

Build Setup

小程序项目路径：../mp-lui/dist

# install dependencies
npm install

npm run dev

# build for production with minification
npm run build

开发进度

表单

Button（基于小程序原生组件）
Checkbox
Radio
Slider
Switch
Uploader

基础组件

Avatar
Badge
Card
Col
Row
Drawer
Gallery
Grid
Icons（小程序原生组件）
Notice-Bar
Panel
Progress
Footer

操作反馈

Actionsheet
Alert
Spin
Dialog
Msg
Picker
Toast

导航相关

Navbar
Tabbar（建议采用小程序原生的tabbar，通过设置app.json来实现）
Tabs（建议采用小程序原生的tabbar，通过设置app.json来实现）

搜索相关

Searchbar

问题

在进行iActionSheet组件开发时，使用iButton组件，并对其进行循环渲染，iButton组件中含有slot。经过mpvue的编译后发现，并未对循环中不同的slot做编译，导致所有slot的编译仅有一个，从而导致了渲染bug。因此，在iActionSheet组件中目前使用小程序Button组件，mpvue中已经有组件循环 slot内容分发问题的issue，需要进一步观察从而进行优化
在进行Grid组件开发时，GridGroup仅作为外层包裹，但如果对Grid进行循环渲染，则页面无显示，还是slot的支持度不够的问题
进行Notice-bar组件开发时，发现原生小程序的动画无法被识别编译
进行Tabbar组件开发时，TabbarItem中是由Badge组件包裹的，然后Tabbar包裹TabbarItem组件，但此时props中传递的title无法被渲染出来，mpvue超过三层以上的组件嵌套导致编译出现紊乱，因此将badge组件拆成原生实现了
MpVue组件中的props避免使用key关键字，会导致页面渲染异常
在使用cell组件时，内部有content和footer两个slot，然后在slot中加入其它组件时，页面无法正常渲染，只能保留一个slot才能生效
在调用mpvue组件时，再向slot中加入结构，data或prop的数据无法传入
组件中使用了小程序原生组件picker-view后，如果在页面中使用此组件并且该页面开启了下拉刷新，会产生一个bug，当在picker-view中下拉时，会导致页面下拉刷新，小程序官方已发现此bug，修复中。
循环中，key中不能为字符串，否则编译报错
嵌套循环中，需要给v-for不同的index名称，否则mpvue编译报错