v-dialogs ·

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

Examples and Documentation

Explorer on

• English site
• 国内站点

The jQuery version: bDialog

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 v-dialogs

Include plugin in your main.js file.

import Vue from 'vue'
import Dialog from 'v-dialogs'
Vue.use(Dialog, {
  // global config options...
})

Usage

Modal

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

// 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)

Mask

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)
})

Toast

// 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)

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