在项目中经常会有在请求前后加loading或者加加载进度条，一般这些组件都会抽离出来作为全局组件
进度条的插件貌似都不是很符合自己项目中的需求，于是。。
参考nprogress样式，自己在项目中封装组件，实现简单的顶部加载进度条。效果如下
组件放到components文件夹下，新建progress文件夹
progress/index.jsx
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import './progress.less'
let defaultState = {show:false}
class Progress extends Component {
constructor(props, context){
super(props, context)
this.state = {...defaultState}
}
start(){ // 开始显示
this.setState({
show:true
})
}
done(){ // 结束隐藏
this.setState({
show:false
})
}
render(){
return (
<div className="myprogress" style={this.state.show? {display:'block'}:{display:'none'}}>
<div className="bar">
<div className="peg"></div>
</div>
<div className="spinner">
<div className="spinner-icon"></div>
</div>
</div>
)
}
}
// 创建元素追加到body
let div = document.createElement('div');
let props = {
};
document.body.appendChild(div);
let Box = ReactDOM.render(React.createElement(
Progress,
props
),div);
export default Box;
progress/progress.less
@themecolor:#ffc900;
.myprogress {
pointer-events: none;
.bar {background: @themecolor;position: fixed;z-index: 1031;top: 0;
left: 0;width: 100%;height: 2px;}
.peg {display: block;position: absolute;right: 0px;width: 100px;height: 100%;box-shadow: 0 0 10px @themecolor, 0 0 5px @themecolor;
opacity: 1.0;-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);transform: rotate(3deg) translate(0px, -4px);}
.spinner {display: block;position: fixed;z-index: 1031;top: 15px;right: 15px;}
.spinner-icon {width: 18px;height: 18px;box-sizing: border-box;
border: solid 2px transparent;border-top-color: @themecolor;border-left-color: @themecolor;border-radius: 50%;
-webkit-animation: myprogress-spinner 400ms linear infinite;
animation: myprogress-spinner 400ms linear infinite;}
.myprogress-custom-parent {overflow: hidden;position: relative;}
} .myprogress-custom-parent .myprogress .spinner,
.myprogress-custom-parent .myprogress .bar {
position: absolute;
} @-webkit-keyframes myprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes myprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
使用--（在请求拦截器里加，请求开始之前加，请求结束隐藏）
import axios from 'axios'
import MProgress from '@/components/progress'
// 设置超时时间
axios.defaults.timeout = 10000 axios.interceptors.request.use(config=>{ // 请求之前加loading
MProgress.start();
return config
},error=>{
return Promise.reject(error)
}) axios.interceptors.response.use(config=>{ // 响应成功关闭loading
MProgress.done();
return config
},error=>{
return Promise.reject(error)
}) export default axios;
以上，封装遮罩层、弹出层同理