JS Toast组件实现
Toast本来是一个比较简单的组件,但是由于与一般组件不同,脱离本身DOM结构,渲染到最外层。所以在Vue或者React之类的渲染模板写出来会非常绕和吃力,而且不易理解。最近自己更贴近于原生js实现Toast,代码简单又少,也可以随意更改,也不影响模块封装。// Toast.jslet ToastWrap = nulllet count = 0function 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>
更多推荐
已为社区贡献1条内容
所有评论(0)