132 lines
4.1 KiB
JavaScript
132 lines
4.1 KiB
JavaScript
class Dialog {
|
||
|
||
config = {
|
||
body: this.$("body"),
|
||
AgainFatherlassName: '',
|
||
AgainCancelClassName: '', // 取消的类名
|
||
AgainConfirmClassName: '', // 确定的类名
|
||
title: '提示',
|
||
content: '这是一段信息',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
beforeCloseType: null,
|
||
showClose: false, // true 显示，false关闭
|
||
confirmEvent: () => {},
|
||
cancelEvent: () => {},
|
||
};
|
||
|
||
constructor(option) {
|
||
this.config.title = option.title || this.config.title;
|
||
this.config.content = option.content || this.config.content;
|
||
this.config.cancelText = option.cancelText || this.config.cancelText;
|
||
this.config.confirmText = option.confirmText || this.config.confirmText;
|
||
this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
|
||
this.config.showClose = option.showClose || this.config.showClose;
|
||
this.config.confirmEvent = option.confirmEvent || this.config.confirmEvent;
|
||
this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
|
||
|
||
this.createdDialog();
|
||
this.BindCancel();
|
||
this.BindConfirm();
|
||
}
|
||
|
||
createdDialog() {
|
||
this.config.body.insertAdjacentHTML(
|
||
"beforeend",
|
||
`
|
||
<div class="dialog ${this.config.AgainFatherlassName}">
|
||
<div class="dialog_background"></div>
|
||
<div class="dialog_content">
|
||
<div class="dialog_title">
|
||
<div class="dialog_text">${this.config.title}</div>
|
||
${
|
||
this.config.showClose
|
||
? `<i class="iconfont"></i>`
|
||
: `<span></span>`
|
||
}
|
||
</div>
|
||
<div class="dialog_content">${this.config.content}</div>
|
||
<div class="dialog_action">
|
||
<div class="dialog_cancel ${this.config.AgainCancelClassName}">
|
||
${this.config.cancelText}
|
||
</div>
|
||
<div class="dialog_confirm ${this.config.AgainConfirmClassName}">
|
||
${this.config.confirmText}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`
|
||
)
|
||
}
|
||
|
||
createdAgainConfirm() {
|
||
if (this.$(".again") == null) {
|
||
|
||
this.config.AgainFatherlassName = "again";
|
||
this.config.AgainCancelClassName = "againCancel";
|
||
this.config.AgainConfirmClassName = "againConfirm";
|
||
this.config.title = ""
|
||
this.config.content = "确认关闭？"
|
||
this.config.cancelText = "取消"
|
||
this.config.confirmText = "确定"
|
||
this.createdDialog();
|
||
|
||
this.click(".againCancel", ()=> {
|
||
this.deleteDialog(".again");
|
||
})
|
||
|
||
this.click(".againConfirm", ()=> {
|
||
this.config.confirmEvent();
|
||
this.deleteDialog(".again");
|
||
this.deleteDialog(".dialog");
|
||
})
|
||
}
|
||
}
|
||
|
||
deleteDialog(className) {
|
||
this.config.body.removeChild(this.$(className))
|
||
}
|
||
|
||
// 取消
|
||
BindCancel() {
|
||
this.click(".dialog_cancel", ()=> {
|
||
this.isShowConfirm("cancel");
|
||
if (this.config.beforeCloseType == null) {
|
||
this.config.cancelEvent();
|
||
}
|
||
})
|
||
}
|
||
|
||
// 确定
|
||
BindConfirm() {
|
||
this.click(".dialog_confirm", ()=> {
|
||
this.isShowConfirm("confirm")
|
||
if (this.config.beforeCloseType == null) {
|
||
this.config.confirmEvent();
|
||
}
|
||
})
|
||
}
|
||
|
||
// 判断如何展示确定关闭弹窗
|
||
isShowConfirm(type) {
|
||
if (this.config.beforeCloseType == type) {
|
||
this.createdAgainConfirm()
|
||
} else {
|
||
this.deleteDialog(".dialog");
|
||
}
|
||
}
|
||
|
||
click(className, methods) {
|
||
this.$(className).onclick = () => methods();
|
||
}
|
||
|
||
|
||
$(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
|
||
}
|
||
|
||
window.Dialog = Dialog |