五、js封装弹框

1，modal.js

class Modal {
  constructor(options) {
    this.options = Object.assign(
      {
        title: "标题",
        showClose: true,
        content: "",
        showCancel: true,
        showConfirm: true,
        cancelText: "取消",
        confirmText: "确定",
        width: "480px",
        onCancel: () => {
          this.closeModal();
        },
        onConfirm: () => {
          this.confirmModal;
        },
      },
      options
    );
  }
  init() {
    let maskDom = document.createElement("div");
    maskDom.className = "el-overlay";
    let dialogDom = document.createElement("div");
    dialogDom.className = "el-dialog";
    dialogDom.style = "width:" + this.options.width;
    let headerDom = document.createElement("div");
    headerDom.className = "el-dialog__header";
    this.createHeader(headerDom);
    let bodyDom = document.createElement("div");
    bodyDom.className = "el-dialog__body";
    this.createBody(bodyDom);
    let footerDom = document.createElement("div");
    footerDom.className = "el-dialog__footer";
    this.createFooter(footerDom);
    dialogDom.appendChild(headerDom);
    dialogDom.appendChild(bodyDom);
    dialogDom.appendChild(footerDom);
    maskDom.appendChild(dialogDom);
    document.body.appendChild(maskDom);
  }
  createHeader(headerDom) {
    let titleDom = document.createElement("span");
    titleDom.className = "el-dialog__title";
    titleDom.innerText = this.options.title;
    headerDom.appendChild(titleDom);
    if (this.options.showClose) {
      let closeDom = document.createElement("button");
      closeDom.className = "el-dialog__headerbtn";
      closeDom.type = 'button';
      closeDom.onclick = this.options.onCancel;
      closeDom.innerHTML = '<i class="el-dialog__close el-icon el-icon-close"></i>';
      headerDom.appendChild(closeDom);
    }
  }
  createBody(bodyDom) {
    bodyDom.innerHTML = this.options.content;
  }
  createFooter(footerDom) {
    if (this.options.showCancel) {
      let cancelDom = document.createElement("button");
      cancelDom.className = "el-button el-button--default el-button--mini";
      cancelDom.type = "button";
      cancelDom.innerText = this.options.cancelText;
      cancelDom.onclick = this.options.onCancel;
      footerDom.appendChild(cancelDom);
    }
    if (this.options.showConfirm) {
      let confirmDom = document.createElement("button");
      confirmDom.className = "el-button el-button--primary el-button--mini";
      confirmDom.type = "button";
      confirmDom.innerText = this.options.confirmText;
      confirmDom.onclick = this.options.onConfirm;
      footerDom.appendChild(confirmDom);
    }
  }
  closeModal() {
    console.log('closeModal');
    document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
  }
  confirmModal() {
    console.log("confirm");
    document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
  }
}

 

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，对于没有出入的配置项，使用默认值。