移动端原生实现一个Toast

原生实现一个简单的Toast

/**
     * 使用es6模板字符串实现DOM字符串
     * @param msg 传入要显示的字符串
     * @param stat 传入toast状态，public为默认提示，静默提交时传入private
     */
function showToast(msg, stat) {
        let ToastNode = `<div class="toast-content">
                            <div class="toast">
                              <span>${msg}</span>
                            </div>
                         </div>`;
        if (stat === 'public'){
            $('body').insertAdjacentHTML('beforeend', ToastNode);
            setTimeout(function () {
                $('body').removeChild($('.toast-content'))
            },1000)
        } else if(stat === 'private'){
            return;
        }
    }

具体样式

.toast-content{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toast{
    width: 26.67vw;
    height: 26.67vw;
    background-color: rgba(36, 36, 37, 0.81);
    border-radius: 1.07vw;
    box-sizing: border-box;
    padding: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toast span{
    text-align: center;
    line-height: 5.33vw;
    color: #ffffff;
    font-size: 3.47vw;
    white-space: pre-wrap;
}