150 lines
4.7 KiB
JavaScript
150 lines
4.7 KiB
JavaScript
/**
|
|
* 封装加载提示
|
|
*/
|
|
class Loading {
|
|
/**
|
|
* 加载进度
|
|
*/
|
|
loading() {
|
|
this.SetLoading()
|
|
// 塞入loading的html
|
|
this.$(".isShow .loading").innerHTML =
|
|
`
|
|
<div class="back">
|
|
<div class="load8">
|
|
<div class="load8-container container1">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
<div class="load8-container container2">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
<div class="load8-container container3">
|
|
<div class="circle1"></div>
|
|
<div class="circle2"></div>
|
|
<div class="circle3"></div>
|
|
<div class="circle4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.$(".isShow .back").style = `padding: 0.4rem;`
|
|
this.show()
|
|
}
|
|
|
|
/**
|
|
* 显示toast提示
|
|
* @param {*} text 文字
|
|
* @param {*} time 自动关闭提示的时间 默认3秒
|
|
*/
|
|
toast(text, time = 3000) {
|
|
this.SetLoading()
|
|
this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
|
|
// 设置边距
|
|
this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
|
|
|
|
// 设置内容
|
|
this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
|
|
this.show()
|
|
setTimeout(()=> this.close(),time)
|
|
}
|
|
|
|
/**
|
|
* 弹出框 dialog
|
|
* @param {*} params
|
|
*/
|
|
dialog(params) {
|
|
params == undefined ? params = {} : null;
|
|
let defaultParams = { title: '标题', message: '内容',
|
|
cancelText: '取消', confirmText: '确定',
|
|
cancelColor: '#323233', confirmColor: '#fb7299'
|
|
};
|
|
|
|
defaultParams.title = params.title || defaultParams.title;
|
|
defaultParams.message = params.message || defaultParams.message;
|
|
defaultParams.cancelText = params.cancelText || defaultParams.cancelText;
|
|
defaultParams.confirmText = params.confirmText || defaultParams.confirmText;
|
|
defaultParams.cancelColor = params.cancelColor || defaultParams.cancelColor;
|
|
defaultParams.confirmColor = params.confirmColor || defaultParams.confirmColor;
|
|
|
|
this.SetLoading()
|
|
this.$(".isShow .loading").innerHTML = `
|
|
<div class="dialog_f">
|
|
<div class="dialog_header">${defaultParams.title}</div>
|
|
<div class="dialog_content">
|
|
<div class="dialog_message">${defaultParams.message}</div>
|
|
</div>
|
|
<div class="dialog_footer">
|
|
<div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
|
|
${defaultParams.cancelText}
|
|
</div>
|
|
<div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
|
|
${defaultParams.confirmText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
// 取消按钮被点击的时候
|
|
this.$(".isShow .dialog_cancel").onclick = () => {
|
|
params.cancel && params.cancel()
|
|
this.close()
|
|
}
|
|
// 确定按钮被点击的时候
|
|
this.$(".isShow .dialog_confirm").onclick = () => {
|
|
params.confirm && params.confirm()
|
|
this.close()
|
|
}
|
|
this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
|
|
this.show()
|
|
}
|
|
|
|
/**
|
|
* 填充loading的html结构
|
|
*/
|
|
SetLoading () {
|
|
if (this.$(".isShow") == null) {
|
|
var isShow = document.createElement("div")
|
|
isShow.className = "isShow"
|
|
isShow.style = "display: none;"
|
|
|
|
var loading = document.createElement("div")
|
|
loading.className = "loading";
|
|
isShow.appendChild(loading)
|
|
this.$("body").appendChild(isShow)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 删除内容，隐藏弹窗
|
|
*/
|
|
close() {
|
|
this.clearContent()
|
|
this.$(".isShow").style.display = "none"
|
|
}
|
|
|
|
/**
|
|
* 显示弹窗
|
|
*/
|
|
show() {
|
|
this.$(".isShow").style.display = "block"
|
|
}
|
|
|
|
/**
|
|
* 清空弹窗内部的内容
|
|
*/
|
|
clearContent() {
|
|
this.$(".isShow .loading").style = "";
|
|
this.$(".isShow .loading").innerHTML = "";
|
|
}
|
|
|
|
$(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
}
|
|
|
|
var Tips = new Loading() |