first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.22/修改/dialog.js

@@ -0,0 +1,132 @@
+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