react---简易toast组件

组件核心代码：

import React, { Component } from 'react'

import PropTypes from 'prop-types';

// toast 弹框组件

class Toast extends Component {

　　static defaultProps = {

　　msg: '操作成功', // 默认提示语

time: 2000, // 默认弹框出现到消失的时间

}

static propTypes = {

　　msg: PropTypes.string,

　　time: PropTypes.number,

}

num = 1;

componentDidMount() {

　　const { msg, time } = this.props;

　　this.showToast(msg, time);

}

showToast = (msg, duration) => {

      duration = isNaN(duration) ? 2000 : duration;

　　var m = document.createElement('div');

　　m.innerHTML = msg;

　　m.style.cssText = "width:50%; min-width: 180px; background: #000; opacity: 0.6; height: auto; min-height: 30px; color: #fff; line-height: 30px; text-align: center; border-radius: 4px; position: fixed; 　　top: 60%; left: 20%; z-index: 9999;"

　　document.body.appendChild(m);

　　setTimeout(function() {

　　　　var d = 0.5;

　　　　m.style.webkitTransition = 'opacity ' + d + 's ease-in';

　　　　m.style.opacity = '0';

　　　　setTimeout(function() {

　　　　　　document.body.removeChild(m)

　　　　}, d * 1000);

　　}, duration);

}

render() {

  return [];

}

}

export default Toast;

组件调用：

页面显示

 

转载于:https://www.cnblogs.com/yxfboke/p/11278064.html