modal Promise Vue

modal.vue

<template>
  <div class="modal" :class="[{'show fade':dialogConfirm}]" :style="{display: dialogConfirm?'block':'none' }">
      <div class="modal-backdrop" :class="[{'show fade':dialogConfirm}]"  @click="cancel"></div>
    <div class="modal-dialog" @click="cancel"> 
    <div class="modal-content" style="z-index: 1050;">
      <header class="modal-header">
        <p class="modal-title">{{ title }}</p>
      </header>
      <section class="modal-body" v-show="!!message">
          {{ message }}
        <!-- Content ... -->
      </section>
      <footer class="modal-footer"  >
        <button class="btn   " @click="cancel">Cancel</button>
        <button class="btn   " :class="options.color" @click="agree">Yes</button>
      </footer>
    </div>
    </div>
  </div>
</template>
<script>
  export default {
    data: () => ({
      dialogConfirm: false,
      resolve: null,
      reject: null,
      message: null,
      title: '',
      options: {
        color: 'btn-primary'
      }
    }),
    methods: {
      open(title, message, options) {
        this.dialogConfirm = true
        this.title = title
        this.message = message
        this.options = Object.assign(this.options, options)
        return new Promise((resolve, reject) => {
          this.resolve = resolve
          this.reject = reject
        })
      },
      agree() {
        this.resolve(true)
        this.dialogConfirm = false
      },
      cancel() {
        this.resolve(false)
        this.dialogConfirm = false
      }
    }
  }
</script>