antd-use-ui
Ant Design各种组件的使用例子,掌握最常用的antd组件套路
一、基本环境搭建
二、调用百度天气API
2.1 添加jsonp模块
yarn add jsonp --save
2.2 封装jsonp方法
import JsonP from 'jsonp';
export default class Axios {
static jsonp(options) {
return new Promise((resolve, reject) => {
JsonP(options.url, {
param: 'callback'
}, function (err, response) {
if (response.status === 'success') {
resolve(response);
} else {
reject(response.messsage);
}
})
});
}
}
2.3 调用百度API,获取天气数据
getWeatherAPIData = () => {
let location = "北京";
let url = `http://api.map.baidu.com/telematics/v3/weather?location=${encodeURIComponent(location)}&output=json&ak=3p49MVra6urFRGOT9s8UBWr2`;
axios.jsonp({ url }).then((res) => {
let weather = res.results[0].weather_data[0].weather;
let weatherPic = res.results[0].weather_data[0].dayPictureUrl;
this.setState({
weather, weatherPic
})
});
}
三、flex布局
3.1 使用flex布局
form {
display: flex;
}
3.2 容器的布局属性
1)决定item的排列方向主轴
flex-direction: row(默认值)|row-reverse|column||column-reverse;
默认情况下item是从左到右从上到下排列
2)决定item在主轴上的对齐方式:
justify-content: flex-start|flex-end|center|space-between,space-around;
3)决定item在垂直于主轴的对齐方式
align-items:flex-start|flex-end|center|baseline|stretch;
3.3 item的布局属性
1)单个item的对齐方式
align-self:属性值同align-items
四、React Router 4.0
4.1 路由模块安装
yarn add react-router-dom --save
4.2核心用法
4.2.1 HashRouter和BrowserRouter区别
HashRouter会包括一个默认的#
4.2.2 常用属性
Route: path,exact(完全匹配),component,render
Switch:此组件item中如果有匹配就命中。
NavLink/Link/Redirect: to //类似超链接,进行路由跳转,to属性为跳转的地址
4.2.3 最简单用法
- 首页
- 关于
4.2.4 动态路由
path中配置动态参数:/about/:id
在页面获取参数:this.props.match.params.id
五、UI组件
5.1使用日期组件
使用日期组件需要安装moment模块:yarn add moment --save
六、axios组件封装
6.1 JsonP和ajax封装
export default class Axios {
static jsonp(options) {
return new Promise((resolve, reject) => {
JsonP(options.url, {
param: 'callback'
}, function (err, response) {
if (response.status === 'success') {
resolve(response);
} else {
reject(response.messsage);
}
})
});
}
static ajax(options) {
let baseUrl = "https://easy-mock.com/mock/5c17a07740c07229aa2e6022/api";
return new Promise((resolve, reject) => {
axios({
url: options.url,
method: 'get',
baseURL: baseUrl,
timeout: 5000,
params: (options.data && options.data.params) || ''
}).then((response) => {
if (response.status === 200) {
let res = response.data;
if (res.code === 0) {
resolve(res.result);
}
else {
Modal.info({
title: "提示",
content: res.msg
})
}
}
else {
reject(response.data);
}
})
});
}
}
6.2 统一处理加载中动画
1.增加至入口文件html
加载中,请稍后...
2.引用loading.less文件
/** load **/
.ajax-loading{
display: none;
.loading{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding:0 40px;
height: 80px;
line-height: 80px;
background: rgba(0, 0, 0, 0.75);
border-radius: 6px;
text-align: center;
z-index: 9999;
font-size:@fontD;
color:#fff;
img{
width: 32px;
vertical-align: middle;
}
span{
margin-left:12px;
}
}
.overlay{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9998;
background: rgb(255, 255, 255);
opacity: 0.1;
}
}
/****/