五、封装模态框

1，modal.js

 1 class Modal {
 2   constructor(options) {
 3     this.options = Object.assign(
 4       {
 5         title: "标题",
 6         showClose: true,
 7         content: "",
 8         showCancel: true,
 9         showConfirm: true,
10         cancelText: "取消",
11         confirmText: "确定",
12         width: "480px",
13         onCancel: () => {
14           this.closeModal();
15         },
16         onConfirm: () => {
17           this.confirmModal;
18         },
19       },
20       options
21     );
22   }
23   init() {
24     let maskDom = document.createElement("div");
25     maskDom.className = "el-overlay";
26     let dialogDom = document.createElement("div");
27     dialogDom.className = "el-dialog";
28     dialogDom.style = "width:" + this.options.width;
29     let headerDom = document.createElement("div");
30     headerDom.className = "el-dialog__header";
31     this.createHeader(headerDom);
32     let bodyDom = document.createElement("div");
33     bodyDom.className = "el-dialog__body";
34     this.createBody(bodyDom);
35     let footerDom = document.createElement("div");
36     footerDom.className = "el-dialog__footer";
37     this.createFooter(footerDom);
38     dialogDom.appendChild(headerDom);
39     dialogDom.appendChild(bodyDom);
40     dialogDom.appendChild(footerDom);
41     maskDom.appendChild(dialogDom);
42     document.body.appendChild(maskDom);
43   }
44   createHeader(headerDom) {
45     let titleDom = document.createElement("span");
46     titleDom.className = "el-dialog__title";
47     titleDom.innerText = this.options.title;
48     headerDom.appendChild(titleDom);
49     if (this.options.showClose) {
50       let closeDom = document.createElement("button");
51       closeDom.className = "el-dialog__headerbtn";
52       closeDom.type = 'button';
53       closeDom.onclick = this.options.onCancel;
54       closeDom.innerHTML = '<i class="el-dialog__close el-icon el-icon-close"></i>';
55       headerDom.appendChild(closeDom);
56     }
57   }
58   createBody(bodyDom) {
59     bodyDom.innerHTML = this.options.content;
60   }
61   createFooter(footerDom) {
62     if (this.options.showCancel) {
63       let cancelDom = document.createElement("button");
64       cancelDom.className = "el-button el-button--default el-button--mini";
65       cancelDom.type = "button";
66       cancelDom.innerText = this.options.cancelText;
67       cancelDom.onclick = this.options.onCancel;
68       footerDom.appendChild(cancelDom);
69     }
70     if (this.options.showConfirm) {
71       let confirmDom = document.createElement("button");
72       confirmDom.className = "el-button el-button--primary el-button--mini";
73       confirmDom.type = "button";
74       confirmDom.innerText = this.options.confirmText;
75       confirmDom.onclick = this.options.onConfirm;
76       footerDom.appendChild(confirmDom);
77     }
78   }
79   closeModal() {
80     console.log('closeModal');
81     document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
82   }
83   confirmModal() {
84     console.log("confirm");
85     document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
86   }
87 }

2，使用modal.js

new Modal({})

以index.html为例：

<script src="./js/modal.js"></script>

    function openModal() {
      modal = new Modal({
        title: "温馨提示",
        showClose: true,
        content:
          '<label style="display: block;padding:16px 0 8px 0;font-weight: bold;line-height:20px;">Key</label>' +
          '<div class="el-input">' +
          '<input class="el-input__inner" type="text" name="key" style="background:#F4F6F8;border:none;">' +
          "</div>" +
          '<label style="display: block;padding:16px 0 8px 0;font-weight: bold;line-height:20px;">Secret</label>' +
          '<div class="el-input">' +
          '<input class="el-input__inner" type="text" name="secret" style="background:#F4F6F8;border:none;">' +
          "</div>",
        showCancel: false,
        showConfirm: true,
        confirmText: "保存",
        width: "480px",
        onConfirm: () => {
          save();
        },
      });
      modal.init();
    }
    function save() {
      let key = document.getElementsByName("key")[0].value;
      let secret = document.getElementsByName("secret")[0].value;
      if (!key || !secret) {
        messageTip('请输入Key和Secret');
        return;
      }
      let params = {
        key,
        secret,
      };
      console.log(params);
      modal.closeModal();
      modal = null;
    }

3，配置项

为modal提供配置项：标题title、是否展示关闭按钮showClose、弹框内容content、是否展示取消按钮showCancel、是否展示确认按钮showConfirm、取消按钮的文本cancelText、确认按钮的文本confirmText、弹框宽度width、取消事件onCancel、确认事件onConfirm，对于没有出入的配置项，使用默认值。