React JsシンToastプロンプトボックスはjqueryを使用しません

この文書は次のとおりです.
http://blog.csdn.net/wyk304443164
効果図:

直接コードを入れて、コード泥棒が少ない.
toast.js
2017.6.9更新、もし何度も呼び出して自動的に前の1つを削除したら、アニメーションは現れません.こちらはtryを使っています.Jqueryを使っていないのでremove新聞を処理したくないからです.

/**
 * Created by wuyakun on 2017/6/7.
 */

import './toast.less';

export let toastIt = function (text, timeout = 3000, options) {

    //         ，      ，       

    try {
        document.body.removeChild(document.querySelector('div.toast-it'));
    } catch (e) {

    }

    //    
    let toast = document.createElement('DIV');
    toast.classList.add('toast-it');
    let content = document.createTextNode(text);
    toast.appendChild(content);
    toast.style.animationDuration = timeout / 1000 + 's';

    for (let prop in options) {
        toast.style[prop] = options[prop];
    }
	//     
    toast.style['z-index'] = 9999999;
    document.body.appendChild(toast);
    setTimeout(function () {
        try {
            document.body.removeChild(toast);
        } catch (e) {

        }
    }, timeout);
};

toast.less

.toast-it {
    background-color: #555555;
    color: #F4F4F4;
    padding: 3px 20px;
    border-radius: 20px;
    text-align: center;
    position: fixed;
    /* center horizontally */
    top: 80%;
    left: 50%;
    transform: translate(-50%, -80%);

    animation-name: TOAST-APPEAR;
    animation-timing-function: ease-in;
    animation-duration: 3s;
}

@keyframes TOAST-APPEAR {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    80% {
        opacity: 1;
        top: 80%;
    }
    100% {
        opacity: 0;
        top: 75%;
    }
}

Reactの使用

import {toastIt} from './toast/toast';

toastIt(msg, 2500, {fontSize: '18px'});

vue

import {toastIt} from '../util/toast'

methods: {
    toast () {
      toastIt('ddd', 2500, {fontSize: '18px'})
    }
  }

参照先:
https://github.com/belfz/toastit.js
////17.6.12////
ポップアップボックスz-indexが小さすぎて他のコントロールに遮られた気まずいことを修正した.