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