JS Toast组件实现

Toast本来是一个比较简单的组件，但是由于与一般组件不同，脱离本身DOM结构，渲染到最外层。所以在Vue或者React之类的渲染模板写出来会非常绕和吃力，而且不易理解。最近自己更贴近于原生js实现Toast，代码简单又少，也可以随意更改，也不影响模块封装。

 

// Toast.js



let ToastWrap = null
let count = 0

function Toast (props) {
    if (!ToastWrap) {
        // 单利模式
        ToastWrap = document.createElement('div')
        ToastWrap.setAttribute('class', 'cpt-toast-wrap')
        document.body.append(ToastWrap)
    }
    let id = '' + Date.now() + count++
    let toast = document.createElement('div')
    toast.setAttribute('id', id)
    toast.innerHTML = `<div class="cpt-toast"><span class="${props.icon}">${props.msg}</span></div>`
    ToastWrap.append(toast)
    setTimeout(() => {
        document.getElementById(id).remove()
    }, props.time || 2000);
}

export default {
    show (msg, time) { Toast({msg, time, icon: 'show'}) },
    success(msg, time) { Toast({ msg, time, icon: 'success' }) },
    error(msg, time) { Toast({ msg, time, icon: 'error' }) },
    info(msg, time) { Toast({ msg, time, icon: 'info' }) }
}


// App.js

import Toast from 'Toast'
<Button onClick={() => { Toast.success('toast show info') }}>Toast</Button>