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
Install & Download:
# NPM
$ npm install vue-utopia-dialog --save