121 lines
3.5 KiB
JavaScript
121 lines
3.5 KiB
JavaScript
class Dlogo {
|
||
config = {
|
||
body: this.$("body"),
|
||
title: "标题",
|
||
content: "内容",
|
||
showClose: false,//true表示显示，flase是关闭
|
||
cancelm: "取消",
|
||
confirmv: "确认",
|
||
AgainFatherlassName: '',
|
||
AgainCancelClassName: '', // 取消的类名
|
||
AgainConfirmClassName: '', // 确定的类名
|
||
beforeCloseType: null,
|
||
cancelEvent: () => {
|
||
|
||
},
|
||
confirmvEvent: () => {
|
||
|
||
}
|
||
};
|
||
|
||
constructor(option) {
|
||
this.config.title = option.title || this.config.title;
|
||
this.config.content = option.content || this.config.content;
|
||
this.config.showClose = option.showClose || this.config.showClose;
|
||
this.config.cancelm = option.cancelm || this.config.cancelm;
|
||
this.config.confirmv = option.confirmv || this.config.confirmv;
|
||
this.config.cancelEvent = option.cancelEvent || this.config.cancelEvent;
|
||
this.config.confirmvEvent = option.confirmvEvent || this.config.confirmvEvent;
|
||
this.config.beforeCloseType = option.beforeCloseType || this.config.beforeCloseType;
|
||
this.createDlogo()
|
||
this.BindClose()
|
||
this.cancelClear()
|
||
this.showCloseClear()
|
||
|
||
}
|
||
|
||
createDlogo() {
|
||
this.config.body.insertAdjacentHTML("beforeend", `<div class="back ${this.config.AgainFatherlassName}">
|
||
<div class="backg"></div>
|
||
<div class="pop">
|
||
<div class="top">
|
||
<div class="title">${this.config.title}</div>
|
||
${
|
||
this.config.showClose
|
||
? `<i class="iconfont icon-guanbi"></i>`
|
||
: `<span></span>`
|
||
}
|
||
</div>
|
||
<div class="content">
|
||
${this.config.content}
|
||
</div>
|
||
<div class="buttom">
|
||
<button class="cancel ${this.config.AgainCancelClassName}">${this.config.cancelm}</button>
|
||
<button class="confirm ${this.config.AgainConfirmClassName}">${this.config.confirmv}</button>
|
||
</div>
|
||
</div>
|
||
</div>`)
|
||
}
|
||
|
||
createdAgainConfirm() {
|
||
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.createDlogo()
|
||
this.click(".againCancel", ()=> {
|
||
this.DeleteDlogo(".again");
|
||
})
|
||
|
||
this.click(".againConfirm", ()=> {
|
||
this.DeleteDlogo(".back");
|
||
this.DeleteDlogo(".again");
|
||
})
|
||
}
|
||
|
||
/*删除元素*/
|
||
DeleteDlogo(came) {
|
||
this.config.body.removeChild(this.$(came))
|
||
}
|
||
|
||
/*关闭按钮被点击*/
|
||
BindClose() {
|
||
this.click(".cancel", () => {
|
||
this.DeleteDlogo(".back");
|
||
this.DeleteDlogo();
|
||
})
|
||
}
|
||
|
||
/*确认按钮被点击*/
|
||
cancelClear() {
|
||
this.click(".confirm", () => {
|
||
this.config.confirmvEvent();
|
||
this.DeleteDlogo(".back");
|
||
})
|
||
|
||
|
||
}
|
||
|
||
/*标签按钮被点击*/
|
||
showCloseClear() {
|
||
this.click(".icon-guanbi",() =>{
|
||
this.DeleteDlogo(".back");
|
||
this.createdAgainConfirm()
|
||
})
|
||
|
||
|
||
}
|
||
$(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
click(className, methods) {
|
||
this.$(className).onclick = () => methods();
|
||
}
|
||
}
|
||
|
||
window.Dlogo = Dlogo |