await dialogs mixin



  • Just sharing my mixin that makes using ‘versions’ of dialog plugin a bit easier by return a promise reply that can be awaited just add mixin and go… See the comments for use and a dialogtest method

    // to use this mixin
    // import and include it in mixins prop array of your component
    // copy this html button somewhere in your component template
    // <q-btn label="dialog test" color="secondary-1" text-color="secondary-1" @click="dialogtest()" />
    // the button will call the dialogtest below
    export default {
      data: function () {
        return {
        }
      },
      computed: {
      },
      watch: {
      },
      methods: {
        async dialogtest () {
          // (un)comment one or move of the tests below
          this.alert('Test Alert', 'All is good, no wait')
          console.log('confirmation', await this.confirm('Test Confirm', 'everything ok?', 'really?'))
          await this.alert('Test Alert', 'All is good,  wait for dismiss')
          console.log('prompt', await this.prompt('Test Prompt', 'What is your favorite color'))
        },
        async dialog (opts = {}) {
          return new Promise(resolve => {
            if (opts.prompt === true) opts.prompt = { model: '', type: 'text' }
            this.$q.dialog({
              title: opts.title || '',
              message: opts.msg || '',
              cancel: opts.cancel == null ? false : opts.cancel,
              persistent: opts.persist == null ? false : opts.persist,
              prompt: opts.prompt,
              ok: {
                label: opts.ok || 'ok'
              }
            })
              .onOk((res) => resolve(opts.confirm ? true : (res || '')))
              .onCancel(() => resolve(false))
          })
        },
        async confirm (title, msg, label) {
          return this.dialog({ title: title, msg: msg, confirm: true, cancel: true, persist: true, ok: label })
        },
        async alert (title, msg) {
          return this.dialog({ title: title, msg: msg })
        },
        async prompt (title, msg, prompt) {
          return this.dialog({ title: title, msg: msg, persist: true, prompt: prompt || true })
        }
      },
      created: function () {
      },
      beforeMount: function () {
      },
      mounted: function () {
      },
      beforeDestory: function () {
      }
    } // export default
    


  • @dgk Great, I was looking for this solution for long.



  • @dgk thanx!


Log in to reply