开源软件名称：

v-dialogs

开源软件地址：

https://gitee.com/TerryZ/v-dialogs

开源软件介绍：

v-dialogs

A simple and powerful dialog, dialog type including Modal, Alert, Mask and Toast, based on Vue2.x

Demo、Document、Changelog

Explorer on

the jQuery version: bDialog

Github: v-dialogs

State

The Dialog Icon

the icons in alert dialog used are made by Elegant Themes

and control icon, toast icon used are come from IconFont

Install

# install dependenciesnpm 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 dialognew 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 dialogthis.$vDialog.alert('This is a <b>Vue</b> dialog plugin: vDialog!');//call a message alert dialog with dialog close callbackthis.$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 callbackthis.$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 maskthis.$vDialog.mask();//use custom messagethis.$vDialog.mask('my data loading...');//use mask with callbackthis.$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 requestaxios.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 positionthis.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!');//open a Toast dialog with a close callbackthis.$vDialog.toast('This is a Vue <b>vDialog</b> Toast!', function(){  // do something...});//open a Toast with some optionsthis.$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)});