kara-module-tost/src/index.js

kara tost

import './index.css'
export default function tost(info){
  let tost = document.querySelector('#tost')
  const frame = document.querySelector('#client') || document.querySelector('#web') || document.querySelector('body')
  if(!tost) {
    tost = document.createElement('div')
    tost.id = 'tost'
    tost.classList.add('tost')
    frame.appendChild(tost)
  }

  const item = document.createElement('div')
  const itemBg = document.createElement('i')
  const itemText = document.createElement('span')
  item.appendChild(itemBg)
  item.appendChild(itemText)
  item.classList.add('tost-item')

  let msg = ''
  let time = 2
  let type = 'success'
  if(typeof info === 'string') {
    msg = info
  }else{
    msg = info.msg
    time = info.time || time
    type = info.type || type
  }


  const msgNode = document.createTextNode(msg)
  itemText.appendChild(msgNode)
  item.classList.add(type)
  itemBg.classList.add(`s-bg-${type}`)

  tost.appendChild(item)

  setTimeout(()=>{
    tost.removeChild(item)
    if(!tost.hasChildNodes()){
      frame.removeChild(tost)
    }
  },time*1000)
}
const typeTost = (info,type) => {
  let newInfo = {}
  if(typeof info === 'string') {
    newInfo = {
      type,
      msg: info,
    }
  }else{
    newInfo = {...info,type}
  }
  tost(newInfo)
}

const successTost = (info) => {
  typeTost(info,'success')
}

const errorTost = (info) => {
  typeTost(info,'error')
}

const warnTost = (info) => {
  typeTost(info,'warn')
}

const infoTost = (info) => {
  typeTost(info,'info')
}

export {successTost,errorTost, warnTost, infoTost}