mt-weui-react v1.0.2
2021/03/15
升级到 React17 + webpack5
简介
- 基于 WeUI v1.1.2 及 React 0.13.3
- 依赖 pubsub-js
重要
该UI组件库使用的是老版本的 0.13.3 的 React 库,由于老版与新版 React 存在很多不兼容的 API,所以该库也不兼容新版 React,如果你希望使用该库,请自行下载源码,重新调整编写,主要兼容性在于老版自动绑定了组件 this 的上下文,而新版需要手动绑定
样式及适配
- weui的样式请自行在项目中引用,该库并没有引用
- 组件中使用了
rem
单位,参考比例是 375屏宽下,根字体大小为100px
index.html
的head中加入下面这段JS,以便动态计算 REM
(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);
示例Demo
安装使用
安装
yarn add mt-weui-react
全部引用
import React from 'react'
import { Button, Flex } from 'mt-weui-react'
const FlexItem = Flex.FlexItem
let App = React.createClass({
render() {
return (
<Flex>
<FlexItem><Button>hello wechat</Button></FlexItem>
<FlexItem><Button>hello wechat</Button></FlexItem>
</Flex>
);
}
})
ReactDOM.render((
<App/>
), document.getElementById('container'));
按需引用
在非SPA应用中使用,最好使用按需要引用的方式加载需要用到的组件,以节省加载资源,按需引用有两中方式引用
直接引用
import Button from 'mt-weui-react/lib/components/button'
使用Babel插件,编译成上面的方式
安装 babel-plugin-component babel插件
npm i babel-plugin-component --save-dev
在文件 .babelrc
文件中添加配置
"plugins": [
["component", {"libraryName": "mt-weui-react", "libDir":"lib/components", "style": false }]
]
然后在项目中正常引入相关组件,最后会被编译成按需引入的方式
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
预览文档
TODO LIST
- Divider
- Group
- Cell
- Header
- Badge
- Message
- dialog
- toast
- GroupTitle
- Button
- Checkbox
- Flex
- FlexItem
- Grid
- GridItem
- Input
- Msg
- Offcanvas
- Sticky
- Swiper
- SwiperItem
- Switch
- Tab
- TabItem
- Textarea
- Tip
- FormPreviex
- Picker
- Previewer
- Circle
- Marquee
- PopupHeader
- Datetime
- Clocker
- Countup
- PopupPicker
- PopupRadio
- PopupAddress
- XNumber
- Range
Progress
qrcode
- scroller
感谢
- 本项目主要参考了
weui
官方的 weui 及 react-weui 及 Vux(Vue版本的WeUI) - Api风格与 vux 基本一致
3 years ago
3 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago