react封装简单的浏览器顶部加载进度条全局组件

在项目中经常会有在请求前后加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;

以上,封装遮罩层、弹出层同理

posted @ 2019-03-14 17:12  c-137Summer  阅读(3587)  评论(0编辑  收藏  举报