frontmessageplugin/messageLight.js

前端message组件

let baseStyle = document.createElement('link')
baseStyle.setAttribute("rel", "stylesheet")
baseStyle.setAttribute("href", "https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.1/css/all.min.css")
baseStyle.setAttribute("type", "text/css")
document.head.appendChild(baseStyle)

let fontStyle = document.createElement('link')
fontStyle.setAttribute("rel", "stylesheet")
// fontStyle.setAttribute("href", "./messageLight.css")
fontStyle.setAttribute("href", "https://cdn.jsdelivr.net/npm/frontmessageplugin@1.0.15/messageLight.css")
fontStyle.setAttribute("type", "text/css")
document.body.appendChild(fontStyle)

let notifications = document.createElement('ul')
notifications.setAttribute("class", "notifications_electrolux")
document.body.appendChild(notifications)


let html = `
<ul class="notifications_electrolux">
<li class="toast_electrolux info">
    <div class="column">
        <i class="fa-solid fa-circle-info"></i>
        <span>你1好</span>
    </div>
</li>

</ul>
`

let toastDetails = {
    timer: 2000,
    success: {
        icon: 'fa-circle-check',
    },
    error: {
        icon: 'fa-circle-xmark',

    },
    warning: {
        icon: 'fa-circle-exclamation',

    },
    info: {
        icon: 'fa-circle-info',

    }
}
const  removeToast = (toast_electrolux) => {
    toast_electrolux.classList.add('hide')
    if (toast_electrolux.timeoutId) clearTimeout(toast_electrolux.timeoutId) // 清楚setTimeout
    // 移除li元素
    setTimeout(() => {
        toast_electrolux.remove()
    }, 500)
}

/**
 * 
 * @param {*} id  success error info warning 类型
 * @param {*} text  文字
 * @param {*} timer  什么时候消失
 */
const createToast = (id, text, timer) => {
    // console.log(id)
    const { icon } = toastDetails[id]
    const toast_electrolux = document.createElement('li') // 创建li元素

    toast_electrolux.className = `toast_electrolux ${id}` // 为li元素新增样式
    toast_electrolux.innerHTML = `<div class="column" >
                <i class="fa-solid ${icon}"></i>
                <span>${text}</span>
                </div>
            `
    notifications.appendChild(toast_electrolux) // 添加元素到 notifications ul
    // 2秒后 隐藏toast
    toast_electrolux.timeoutId = setTimeout(() => removeToast(toast_electrolux), timer)
}




export { createToast}