A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Live Examples on CodePen, more examples and documentation please visit below
The jQuery version: bDialog
The icons in alert dialog used are made by Elegant Themes
The control icon, toast icon used are come from IconFont
npm i -S v-dialogs
Include plugin in your project
import Vue from 'vue'
import Dialogs from 'v-dialogs'
Vue.use(Dialogs, {
// global config options...
})
// Functional open alert dialog
DialogAlert(message, [callback], [option])
// Open alert dialog with globally v-dialogs instance
this.$dlg.alert(message, [callback], [options])
// Examples
import { DialogAlert } from 'v-dialogs'
function deleteUser (userId) {
DialogAlert('Deleted data cannot be recovered, are you sure?', () => {
executeDeleteUser(userId).then(() => {
DialogAlert('Delete complete.', { messageType: 'success' })
})
}, { messageType: 'confirm' })
}
// Functional open modal dialog
DialogModal(component, [options])
// Open modal dialog with globally v-dialogs instance
this.$dlg.modal(component, [options])
// Examples
import { DialogModal, DialogAlert } from 'v-dialogs'
import Page from './Page.vue'
DialogModal(Page, {
width: 400,
height: 300,
title: 'User Profile',
params: {
userId: 1,
userName: 'Terry Zeng'
},
callback: data => {
DialogAlert(`Received message: ${data}`)
}
})
// Globally instance example
this.$dlg.modal(Page, {
...
callback: data => {
this.$dlg.alert(`Received message: ${data}`)
}
})
// Functional open toast dialog
DialogToast(message, [callback], [option])
// Open toast dialog with globally v-dialogs instance
this.$dlg.toast(message, [callback], [options])
// Examples
import { DialogToast } from 'v-dialogs'
// Display message in toast
DialogToast(message)
// Display message with callback
DialogToast(message, callback)
// Display message with options
DialogToast(message, options)
// Display message with callaback and options
DialogToast(message, callback, options)
// Functional open mask dialog
DialogMask([message], [callback], [options])
// Open mask dialog with globally v-dialogs instance
this.$dlg.mask([message], [callback], [options])
import { DialogMask } from 'v-dialogs'
// Display default message
DialogMask()
// Display specify message
DialogMask('Data loading, please hold on a moment...')
Dialog helper collection
Close a dialog, when no specified key
parameter, will close the last one opened dialog
import { DialogMask, DialogHelper } from 'v-dialogs'
const key = DialogMask()
// do your job stuff
doSomeJobStuff().then(() => {
// close mask with key
DialogHelper.close(key)
})
Close all dialogs at once
import { DialogHelper } from 'v-dialogs'
fetchData()
.then(() => {
// Do fetch data success work
...
})
.catch(error => {
// Login state timeout for example
if (error.isLoginTimeout) {
// Close all opened dialogs
DialogHelper.closeAll()
// Redirect to login page
router.push({ path: '/login' })
}
})