在我们写原生的时候需要用到提示这时候我们想到一个toast效果感觉挺好的就用它吧, 这个可以在页面内提示也可在某个div提示非常的nine
css代码:<可以根据需要的效果进行修改>
#toast {
position: absolute;
display: none;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
z-index: 9999;
margin: auto;
padding: 8px 16px;
min-width: 120px;
min-height: 30px;
line-height: 30px;
border-radius: 5px;
text-align: center !important;
color: #fff;
font-size: 18px;
background-color: rgba(0, 0, 0, 0.5);
}
js代码: <可以根据需要的效果进行修改>
let toast = {
hideTimeout: null,
init: function () {
var toastNode = document.createElement('div');
toastNode.innerHTML = '<span class="text" style="text-align: center">默认提示</span>';//设置HTML模板,可以根据需求设计
toastNode.id = 'toast';//设置id,一个页面有且仅有一个toast
toastNode.setAttribute('class', 'toast');// 设置类名,如果有必要的话
toastNode.style.display = 'none';//设置隐藏,默认隐藏
document.body.appendChild(toastNode);//添加到body下面
// kuang.appendChild(toastNode);//添加到需要的盒子下面
},
show: function (text) {
if (this.hideTimeout) {//判断当前是否有弹出框,有的话先关闭当前
clearTimeout(this.hideTimeOut);
this.hideTimeOut = null;
}
if (!text) {//判断传入提示文本是否为空,是的话返回
return;
}
var toastNode = document.getElementById('toast');
if (!toastNode) {//判断toast是否初始化
console.log('未初始化');
return;
}
var toastText = toastNode.querySelector('.text');
toastText.innerHTML = text || '';//找到toast设置显示文本
toastNode.style.display = 'block';//设置toast为显示状态
this.hideTimeout = setTimeout(function () {//timeout设置多久后隐藏
toastNode.style.display = 'none';
toast.hideTimeout = null;
}, 2000);
},
hide: function () {
if (this.hideTimeout) {//如果当前存在toast,就关闭当前toast
clearTimeout(this.hideTimeOut);
this.hideTimeOut = null;
}
var toastNode = document.getElementById('toast');
if (toastNode) {
toastNode.style.display = 'none';//移除toastDOM
document.body.removeChild(toastNode);
}
}
}
使用:
btn.addEventListener("click", function () {
toast.init(); // 初始化
setTimeout(toast.hide, 2000); // 消息显示时长
toast.show("提示信息"); // 提示内容
})