A simple and powerful dialog for Vue2, including Modal, Alert, Mask and Toast modes
Switch branches/tags
Nothing to show
Clone or download
Latest commit b3efc00 Jul 19, 2018
Permalink
Failed to load latest commit information.
dist update May 22, 2018
src update May 22, 2018
.babelrc commit Apr 16, 2018
.editorconfig commit Apr 16, 2018
.gitignore update Apr 16, 2018
LICENSE Initial commit Apr 16, 2018
README.md Update README.md Jul 19, 2018
index.html commit Apr 16, 2018
package.json update May 22, 2018
webpack.config.js update Apr 16, 2018

README.md

v-dialogs

A simple and powerful dialog for Vue2, dialog type including Modal, Alert, Mask and Toast



Demo、Document、Changelog

Explorer on

the jQuery version: bDialog



State

npm version license npm



The Dialog Icon

the icons in alert dialog used are made by Elegant Themes

and control icon, toast icon used are come from IconFont



Vue plugin series

Plugin Status Description
v-page npm version A simple pagination bar, including length Menu, i18n support
v-dialogs npm version A simple and powerful dialog, including Modal, Alert, Mask and Toast modes
v-tablegrid npm version A simpler to use and practical datatable
v-uploader npm version A Vue2 plugin to make files upload simple and easier,
you can drag files or select file in dialog to upload
v-ztree npm version A simple tree for Vue2, support single or multiple(check) select tree,
and support server side data
v-gallery npm version A Vue2 plugin make browsing images in gallery
v-region npm version A simple region selector, provide Chinese administrative division data
v-selectpage npm version A powerful selector for Vue2, list or table view of pagination,
use tags for multiple selection, i18n and server side resources supports
v-suggest npm version A Vue2 plugin for input suggestions by autocomplete
v-playback npm version A Vue2 plugin to make video play easier
v-selectmenu npm version A simple, easier and highly customized menu solution



Install

npm i v-dialogs --save

Include plugin in your main.js file.

import Vue from 'vue'
import vDialog from 'v-dialogs';
Vue.use(vDialog);

Use case

Modal

v-dialogs-modal

import myComponent from './myComponent';//import component you want to open in Modal dialog

new Vue({
  el: '#app',
  methods: {
    click(){
      //open component in Modal, and passing params to component
      this.$vDialog.modal(myComponent, {
        params: {
          a: 1,
          b: 2
        }
      });
    }
  }
});

receive params in component

export default {
  name: 'myComponent',
  props: ['params']
  data(){
    console.log(this.params);//{a:1, b:2}
    return {};
  }
}

close dialog and return data in component

export default {
  name: 'myComponent',
  props: ['params']
  data(){
    console.log(this.params);//{a:1, b:2}
    return {};
  },
  methods: {
    closeDialog(){
      let data = {
        a: 2,
        b: 4
      };
      //close current Modal dialog and return data to caller
      this.$vDialog.close(data);
    }
  }
}

Alert

v-dialogs-alert

//call a message alert dialog
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!');

//call a message alert dialog with dialog close callback
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!',function(){
  //your callback code
});

//call a custom type message alert dialog with dialog close callback
this.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!',function(){
  //your callback code
},{
  messageType: 'error',
  closeTime: 2,// auto close alert dialog in 2 second,
  language: 'en'// i18n support 'cn', 'en', 'jp'
});

Mask

v-dialogs-mask

//open a full screen mask
this.$vDialog.mask();

//use custom message
this.$vDialog.mask('my data loading...');

//use mask with callback
this.$vDialog.mask('my data loading...', function(){
  // do something when mask close
});

some time, you can use mask like this:

let that = this;
let dialogKey = this.$vDialog.mask();
// do some http request
axios.post(...).then(resp){
  // do your business
  that.$vDialog.close(null, dialogKey);
};

Toast

v-dialogs-toast

open a Toast dialog in a corner

//open a Toast dialog with message, default show to right bottom position
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!');

//open a Toast dialog with a close callback
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!', function(){
  // do something...
});

//open a Toast with some options
this.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!',null, {
  messageType: 'warning',//theme set
  position: 'topLeft',// show position
  dialogCloseButton: false, // show dialog without close button
  closeTime: 3 // auto close toast times(second)
});

messageType:

  • 'info'(default)
  • 'warning'
  • 'error'
  • 'success'

position:

  • 'topLeft'
  • 'topCenter'
  • 'topRight'
  • 'bottomLeft'
  • 'bottomCenter'
  • 'bottomRight'