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>