Small Popup Box Replacement With Vue.js – vue-dialog

Description:

Yet another Vue.js component that creates simple clean dialog windows to replace the native JavaScript popup boxes.

Usage:

Install and import the dialog component.

import Dialog from 'vue-utopia-dialog'
import 'vue-utopia-dialog/dist/css/dialog.css'
Vue.use(Dialog)

Create alert/confirm/prompt dialog boxes as these:

// this.$dialog.alert(option)
// this.$dialog.confirm(option)
// this.$dialog.prompt(option)
export default {
  name: 'dialog-test',
  methods: {
    alert () {
      this.$dialog.alert({
        title: 'Alert',
        desc: 'this is an alert!'
      })
    },
    confirm () {
      this.$dialog.confirm({
        title: 'Confirm',
        desc: 'this is a confirm!',
        confirm: () => {
          window.alert('yes')
        },
        cancel: () => {
          window.alert('no')
        }
      })
    },
    prompt () {
      this.$dialog.prompt({
        title: `What's your name?`,
        desc: 'this is a prompt!',
        confirm: text => {
          window.alert(`yes: ${text}`)
        },
        cancel: () => {
          window.alert('no')
        }
      })
    }
  }
}

Preview:

Download Details:

Author: tracy2zhang

Live Demo: https://tracy2zhang.github.io/vue-dialog

Download Link: https://github.com/tracy2zhang/vue-dialog/archive/master.zip

Official Website: https://github.com/tracy2zhang/vue-dialog

Last Update: November 16, 2017

Views Total: 754

Install:

# NPM
$ npm install vue-utopia-dialog --save