原生js扣一个this.$Message

//js封装一个消息提示，类似this.$message。

inner为提示的内容，state为消息状态(error，info，success)

function message(inner, state) {

    let message = document.createElement('div')

    let messagep = document.createElement('p')

    let content = document.getElementById('content')

    messagep.style.cssText = "width: auto;font-size: 12px;"

    messagep.innerHTML = inner

    let img = document.createElement('img')

    let bgimg = ['img/error.png', 'img/info.png', 'img/success.png']

    img.style.cssText = 'width: 12px; height: 12px; zIndex: 99; margin-right: 8px;'

    if (state == 'error') {

        img.setAttribute("src", bgimg[0])

        messagep.style.color = 'red'

    } else if (state == 'success') {

        img.setAttribute("src", bgimg[2])

        messagep.style.color = '#2dbc17'

    } else {

        img.setAttribute("src", bgimg[1])

        messagep.style.color = '#2c2c2c'

    }

    message.insertBefore(img, message.children[0])

    message.appendChild(messagep)

    message.style.cssText = 'display: flex; width: auto; height: 30px; align-items: center; position: fixed; left: 50%; top:20px; transform:translate(-50%); background-color: rgba(255,255,255,.9);border-radius: 5px;padding:0px 8px'

    content.insertBefore(message, content.children[0])

    setTimeout(() => {

        message.style.display = 'none'

    }, 3000);

}

逻辑其实很简单，就是在页面上添加定位元素，然后根据传入的状态，去修改小图标和字体颜色