NASA Planetary Mission

    v-dialogs
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    v-dialogs

    CircleCI code coverage npm version license npm

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

    Examples and Documentation

    Explorer on

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

    Install

    npm i v-dialogs

    DownloadsWeekly Downloads

    272

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    1.46 MB

    Total Files

    11

    Last publish

    Collaborators

    • terryz