v-dialogs

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 project

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

Usage

Alert

// Globally instance open alert dialog
// alert message
this.$dlg.alert(message)
// alert message with callback
this.$dlg.alert(message, callback)
// alert message with options
this.$dlg.alert(message, options)
// alert message with callaback and options
this.$dlg.alert(message, callback, options)

// Functional open alert dialog
import { DialogAlert } from 'v-dialogs'

DialogAlert(message, [callback], [option])

Modal

import Profile from './Profile.vue'

// Globally instance open modal dialog
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}`)
  }
})

// Functional open modal dialog
import { DialogModal } from 'v-dialogs'

DialogModal(page, [options])

Toast

// Globally instance open toast dialog
// show message in corner
this.$dlg.toast(message)
// show message with callback
this.$dlg.toast(message, callback)
// show message with options
this.$dlg.toast(message, options)
// show message with callaback and options
this.$dlg.toast(message, callback, options)

// Functional open toast dialog
import { DialogToast } from 'v-dialogs'

DialogToast(message, [callback], [option])

Mask

// Globally instance open mask dialog
// show default message
this.$dlg.mask()
// show specify message
this.$dlg.mask('Data loading, please hold on a moment...')

// Functional open mask dialog
import { DialogMask } from 'v-dialogs'

DialogMask([message], [callback])

DialogHelper

close

import { DialogMask, DialogHelper } from 'v-dialogs'

const key = DialogMask()
// do your job stuff
job().then(() => {
  // close mask with key
  DialogHelper.close(key)
})

closeAll

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

Changelog

3.0.0 (2024-07-06)

Features

Public content

• Added Message、Drawer dialog types
• Added header prop to set the display of the header, title prop is only used to set the header text content
• Alert、Message、Toast dialog types added message type quick access function
• Added shake prop to set whether to apply the shaking animation reminder for area operations outside the dialog
• The default language change to English
• closeTime rename to duration

Alert

• Added colorfulShadow prop to specify whether to display the corresponding color shadow for warning、error and success message types

Mask

• Added pill prop to set whether to apply pill style to content panel
• Added icon prop to set whether display loading icon
• Added panel prop to set whether to display the content panel. If it is turned off, the content will be displayed directly on the mask
• Added appendTo prop to specify the target area to be covered by the mask

Toast

• Added offset prop set the distance between the dialog box and the edge of the screen
• position rename to placement, and removed two center placement options

Modal

• Added DialogModalBox component form of use