1.message.js
const message = (props)=>{
const {message, type="success", duration=2000} = props
const success = {
bgc : "#F7FBEF"
color: "#63C339"
}
const error = {
bgc: " #FFF3F7"
color: "#F76D6B"
}
const body = document.body
let parent = document.crementElement("div")
let text = document.createTextNode(message)
parent.appendChild(text)
parent.setAttribute("class", "message")
if(type === "success"){
parent.style.background = success.bgc
parent.style.color = success.color
} else if(type === "error"){
parent.style.background = error.bgc
parent.style.color = error.color
}
parent.style.opacity = "0"
body.appendChild(parent)
parent.style.opacity = "1"
setTimeout(()=>{
parent.style.display = "none"
body.removeChild(parent)
}, duration)
}
export default message
2.css样式
.message{
width: 300px;
height: 45px;
line-hight: 45px;
border-radius: 4px;
padding-left: 30px;
margin: 0 auto;
font-size: 14px;
position: fixed;
top: 20px;
left: calc(50%-200px)
transition: all linear 1s;
}
3.页面中使用
message({type: "success", message: "修改成功！", duration: 2000})
