v-dialogs ·

A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast

Examples and Documentation

The Dialog Icon

The icons in alert dialog used are made by Elegant Themes The control icon, toast icon used are come from IconFont

Installation

npm i -S vuejs-dialogs

Include plugin in your main.js file.

1import Vue from 'vue'
2import Dialog from 'vuejs-dialogs'
3Vue.use(Dialog, {
4  // global config options...
5})

Usage

Modal

1import Profile from './Profile.vue'
2
3this.$dlg.modal(this,Profile, {
4  width: 400,
5  height: 300,
6  title: 'User Profile',
7  params: {
8    userId: 1,
9    userName: 'Terry Zeng'
10  },
11  callback: data => {
12    this.$dlg.alert(`Received message: ${data}`)
13  }
14})

Alert

1// alert message
2this.$dlg.alert('message')
3// alert message with callback
4this.$dlg.alert('message', () => { // do somthing })
5// alert message with options
6this.$dlg.alert('message', { ...options })
7// alert message with callaback and options
8this.$dlg.alert('message', callback, options)

Mask

1const key = this.$dlg.mask('Data loading, please hold on a moment...')
2
3// do some stuff
4job().then(resp => {
5  // close mark layer when job done
6  this.$dlg.close(key)
7})

Toast

1// show message in corner
2this.$dlg.toast('message')
3// show message with callback
4this.$dlg.toast('message', () => { // do somthing })
5// show message with options
6this.$dlg.toast('message', { ...options })
7// show message with callaback and options
8this.$dlg.toast('message', callback, options)

Vue plugin series

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