ConfirmDialog.vue

<template>
  <div class="modal" id="confirmDialog" tabindex="-1" role="dialog" aria-labelledby="confirmDialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title">Confirm Dialog</h6>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">confirm for...</div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn ui-cancel-button"
            data-dismiss="modal"
            @click="cancel()"
          >ยกเลิก</button>
          <button type="button" class="btn ui-confirm-button" @click="confirm()">ยืนยัน</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let confirmCallback;
let cancelCallback;
let buttonStyleClass;

const $dialog = () => {
  return window.jQuery("#confirmDialog");
};

const ConfirmDialog = {
  create() {
    confirmCallback = null;
    cancelCallback = null;
    buttonStyleClass = null;
    return this;
  },
  title(text) {
    $dialog()
      .find(".modal-title")
      .text(text);
    return this;
  },
  body(text) {
    $dialog()
      .find(".modal-body")
      .text(text);
    return this;
  },
  show() {
    const $el = $dialog();
    const $confirmButton = $el.find(".ui-confirm-button");
    $confirmButton.removeClass("btn-primary").removeClass("btn-danger");

    if (!buttonStyleClass) {
      buttonStyleClass = "btn-primary";
    }

    $confirmButton.addClass(buttonStyleClass);
    $el.modal("show");
    return this;
  },
  close() {
    $dialog().modal("hide");
    return this;
  },
  confirmButtonStylePrimary() {
    buttonStyleClass = "btn-primary";
    return this;
  },
  confirmButtonStyleDanger() {
    buttonStyleClass = "btn-danger";
    return this;
  },
  onConfirm(callback) {
    confirmCallback = callback;
    return this;
  },
  onCancel(callback) {
    cancelCallback = callback;
    return this;
  }
};

export default {
  ...ConfirmDialog,
  methods: {
    confirm() {
      if (confirmCallback) {
        confirmCallback(ConfirmDialog);
      }
    },
    cancel() {
      if (cancelCallback) {
        cancelCallback(ConfirmDialog);
      }
    }
  }
};
</script>

<style scoped>
.modal-content {
  box-shadow: 0 0 15px #0202023d;
  overflow: hidden;
  border-color: #0000004a;
}

.modal-header {
  background-color: #f7f7f7;
  padding: 0.75rem;
}

.modal-footer {
  border-top: none;
}

.modal-footer .btn {
  min-width: 80px;
  margin-left: 1rem;
}

.modal-footer .ui-cancel-button {
  border: solid 1px #dedede;
}
</style>