npm install mt-weui-react升级到 React17 + webpack5
- 基于 WeUI v1.1.2 及 React 0.13.3
- 依赖 pubsub-js
rem 单位,参考比例是 375屏宽下,根字体大小为 100pxindex.html 的head中加入下面这段JS,以便动态计算 REM
``javascript`
(function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var h=e.clientWidth||320;var f=e.classList;var g=h<320?320:h>450?450:h;var i=100(g/375);c.REM=i;e.style.fontSize=i+"px";e.style.opacity=1};e.style.opacity=0;c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false);c.rem2px=function(f){return parseFloat(f)c.REM};c.px2rem=function(f){return parseFloat(f)/c.REM}})(document,window);

``
yarn add mt-weui-react
`javascript
import React from 'react'
import { Button, Flex } from 'mt-weui-react'
const FlexItem = Flex.FlexItem
let App = React.createClass({
render() {
return (
);
}
})
ReactDOM.render((
), document.getElementById('container'));
`
在非SPA应用中使用,最好使用按需要引用的方式加载需要用到的组件,以节省加载资源,按需引用有两中方式引用
`javascript`
import Button from 'mt-weui-react/lib/components/button'
安装 babel-plugin-component babel插件
``
npm i babel-plugin-component --save-dev
在文件 .babelrc 文件中添加配置
`javascript`
"plugins": [
["component", {"libraryName": "mt-weui-react", "libDir":"lib/components", "style": false }]
]
然后在项目中正常引入相关组件,最后会被编译成按需引入的方式
`javascript
import { Button } from 'mt-weui-react'
// 经过插件转译为:
import Button from 'mt-weui-react/lib/components/button'
`
``
yarn run start
启动本地开发,打开 http://localhost:8081 预览
``
yarn run build
yarn run build:example
示例Demo发布到 /dist 目录下
#### 生成文档
``
yarn run build:docs
``
yarn run docs
打开 http://localhost:8087 预览文档
- [x] Divider
- [x] Group
- [x] Cell
- [x] Header
- [x] Badge
- [x] Message
- [x] dialog
- [x] toast
- [x] GroupTitle
- [x] Button
- [x] Checkbox
- [x] Flex
- [x] FlexItem
- [x] Grid
- [x] GridItem
- [x] Input
- [x] Msg
- [x] Offcanvas
- [x] Sticky
- [x] Swiper
- [x] SwiperItem
- [x] Switch
- [x] Tab
- [x] TabItem
- [x] Textarea
- [x] Tip
- [x] FormPreviex
- [x] Picker
- [x] Previewer
- [x] Circle
- [x] Marquee
- [x] PopupHeader
- [x] Datetime
- [x] Clocker
- [x] Countup
- [x] PopupPicker
- [x] PopupRadio
- [x] PopupAddress
- [x] XNumber
- [x] Range
- [x] Progress
- [ ] qrcode
- [ ] scroller
- 本项目主要参考了 weui` 官方的 weui 及 react-weui 及 Vux(Vue版本的WeUI)
- Api风格与 vux 基本一致