A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Explorer on
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 main.js
file.
import Vue from 'vue'
import Dialog from 'v-dialogs'
Vue.use(Dialog, {
// global config options...
})
import Profile from './Profile.vue'
this.$dlg.modal(Profile, {
width: 400,
height: 300,
title: 'User Profile',
params: {
userId: 1,
userName: 'Terry Zeng'
},
callback: data => {
this.$dlg.alert(`Received message: ${data}`)
}
})
// alert message
this.$dlg.alert('message')
// alert message with callback
this.$dlg.alert('message', () => { // do somthing })
// alert message with options
this.$dlg.alert('message', { ...options })
// alert message with callaback and options
this.$dlg.alert('message', callback, options)
const key = this.$dlg.mask('Data loading, please hold on a moment...')
// do some stuff
job().then(resp => {
// close mark layer when job done
this.$dlg.close(key)
})
// show message in corner
this.$dlg.toast('message')
// show message with callback
this.$dlg.toast('message', () => { // do somthing })
// show message with options
this.$dlg.toast('message', { ...options })
// show message with callaback and options
this.$dlg.toast('message', callback, options)
Plugin | Status | Description |
---|---|---|
v-page | A simple pagination bar, including length Menu, i18n support | |
v-dialogs | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes | |
v-tablegrid | A simpler to use and practical datatable | |
v-uploader | A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload |
|
v-ztree | A simple tree for Vue2, support single or multiple(check) select tree, and support server side data |
|
v-gallery | A Vue2 plugin make browsing images in gallery | |
v-region | A simple region selector, provide Chinese administrative division data | |
v-selectpage | A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports |
|
v-suggest | A Vue2 plugin for input suggestions by autocomplete | |
v-playback | A Vue2 plugin to make video play easier | |
v-selectmenu | A simple, easier and highly customized menu solution |