Vuejs-V dialogs v2.1.4: v-dialogs - A simple and powerful dialog, including Modal, Alert, Mask and Toast modes, based on Vue2.x

icon
Latest Release: v2.1.4

Changelog:

  • add Function type for Modal component prop
  • upgrade some lib
Source code(tar.gz)
Source code(zip)

v-dialogs · 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 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.taost('message')
// show message with callback
this.$dlg.taost('message', () => { // do somthing })
// show message with options
this.$dlg.taost('message', { ...options })
// show message with callaback and options
this.$dlg.taost('message', callback, options)

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

Comments

  • button localization
    button localization

    Dec 7, 2019

    How can I change title, "ok" and(or) "cancel" names (strings) to custom text? In confirm alert specifically.

    suggestion 
    Reply
  • Alert Dialog width not  proportional on mobile view
    Alert Dialog width not proportional on mobile view

    Mar 31, 2020

    source code: <div class="v-dialog-dialog" style="width: 450px; height: 210px; top: 263px;"><div class="v-dialog-content" style=""><div class="v-dialog-header"><h3>Confirmation</h3></div><div class="v-dialog-body" style="height: 168px;"><div class="v-dialog-alert alertConfirm"><div class="v-dialog-alert__content">Do you really want to leave?</div><div class="v-dialog-alert__buttons"><button type="button" class="v-dialog-btn__ok">OK</button><button type="button" class="v-dialog-btn__cancel">Cancel</button></div></div></div></div></div>

    localhost_3000_(iPhone 6_7_8 Plus)

    can you make it dynamic?

    Reply
  • async component
    async component

    Apr 30, 2020

    if i write async component, show Vue Warn

      async openReferral(mailID) {
                    let that = this;
                    let addReferral= async ()=>{return  await import('../../referral/referralTask/add.vue')}
                    that.$dlg.modal(addReferral, {width: 800, height: 750, title: "add task"
                        params: {
                        mailID :mailID,
                        }});
                },
    

    image

    Reply
  • shaking属性优化建议
    shaking属性优化建议

    May 3, 2020

    大佬,能不能这样,shaking属性,如果是“close",就关闭,这样的话,是不是更灵活,还是说大佬已经决定了不这样做?

    Reply
  • 在ant design vue中使用v-dialogs存在bug
    在ant design vue中使用v-dialogs存在bug

    Jun 18, 2020

    在ant design vue中使用v-dialogs,弹出窗口中无法正常使用 时间选择器()、下拉框(a-select),能不能修正一下,谢谢,

    Reply
  • 100% width and height possible?
    100% width and height possible?

    Dec 11, 2020

    hi, 100% width works for me but is it possible to have 100% height setting also?

    Reply
  • resize the dialog and drag the dialog
    resize the dialog and drag the dialog

    Dec 17, 2020

    Hi, can the dialog resize and drag to other place in the window? if not, please add such features. thx.

    Reply
  • maximize dialog the height is not maximized
    maximize dialog the height is not maximized

    Dec 17, 2020

    Hi, when maximize the dialog by click the maximize icon, the width is maximized to full width, but the dialog height is still the old height. please fix it. thx.

    bug 
    Reply
  • does it work for Vue 3 ?
    does it work for Vue 3 ?

    Jan 30, 2021

    as the title says

                                                                                                                                                                                                           
    Reply
  • minimize modal
    minimize modal

    Jul 28, 2021

    could you please add option for minimize modal?

    enhancement 
    Reply
  • Safari
    Safari

    Aug 30, 2019

    Somehow it doesn't pop up at safari

    Reply
  • modal,如何实现点击OK之后等调用API成功返回之后才关闭modal框
    modal,如何实现点击OK之后等调用API成功返回之后才关闭modal框

    Sep 2, 2019

    现在的做法是emit一个事件,传递一些数据到父组件 this.$emit('close', {action: this.action, index: this.index,data: data}) 但是emit之后modal就自动关闭了

    如何实现父组件调用接口成功返回之后才关闭modal框?

    Reply
  • alert.confirm picture
    alert.confirm picture

    Aug 12, 2019

    Hi, is it possible to remove or change the picture in alert.confirm modal ?

    Reply
  • some idea
    some idea

    Jan 7, 2019

    i hope to add responsive feature in next version...

    second idea related to {params}... with this version of v-dialogs, we should change props name from {firstname} to {params.firstname} that is not good... it is better that i can send dynamic props name to child component...

    Reply
  • Any other component in v-dialogs is not working well
    Any other component in v-dialogs is not working well

    Oct 27, 2019

    I'm user any other component is not working well as my datePicker it not working well

    Forpost component:

    <template>
    	<div class="">
     <date-picker 
       class="dateTimePiker"
       :lang="langs" 
       format="DD/MM/YYYY" 
       v-model="model.close_date" 
       :placeholder="close_date" 
       name="close_date"
     >
     </date-picker>                   
    </div>
    </template>
    <script>
    import DatePicker from 'vue2-datepicker';
    export default{
     props:[],
     components:{
       'date-picker':DatePicker,
     },
     mounted(){
     },
     computed: {
     },
     data(){
         return{
           model:{
             close_date:''
           }
         }
     },
     methods:{
     }
    }
    </script>
    

    Call Dialog Component:

    import jobPostForm from './formPostJob.vue';
    import vDialog from 'v-dialogs';
    Vue.use(vDialog);
    export default{
    openEditPost(data){
    	            this.$dlg.modal(jobPostForm, {
    	            	title:"Edit Post",
    	                width: 550,
    	                height: 450,
    	                //send params to inner component
    	                params: {
    	                },
    	                //modal dialog close callback
    	                //data: inner component call 'this.$emit.('close', data)'
    	                //to close modal and return data
    	                // callback: data=>{
    	                //     //alert selected result
    	                //     this.$dlg.alert(`You selected ${data.companyName} company`);
    	                // }
    	            });
    		    },
    }
    

    Error: 2019-10-27_13-21-04

    Reply
  • 请问一下,可以使用CDN方式使用吗?
    请问一下,可以使用CDN方式使用吗?

    Aug 29, 2019

    我现在通过CDN方式使用时遇到了问题(历史问题不能使用npm这种方式), 我使用Vue.component{'组件名A', {}} 全局注册组件A,在其他的组件B里面这样调用 this.$dlg.modal(这个地方如何填写, {}), 尝试以下几种方式都不行

    1. Vue.component('组件名A') 报错: Invalid prop: type check failed for prop "component". Expected Object, got Function
    2. '组件名'
    3. 使用私有组件的注册方式进行 都不行, 该如何填写
    Reply
  • vuex support
    vuex support

    Jan 7, 2019

    does it support vuex? image

    Reply
  • position:'topRight'
    position:'topRight'

    Aug 20, 2018

    IE9+:

    div[data-v-09e2b9ea].topRight.vDialogToast{left:auto\9;bottom:auto\9;}
    

    其他position可能也需要类似处理

    Reply
  • Icons and fonts in cn
    Icons and fonts in cn

    Jun 22, 2018

    How do I set the language to en instead of cn?

    Reply
  • 接上个话题
    接上个话题

    Aug 31, 2018

    @tage-zh 默认的是 Font class,并不是 Unicode,这里应该要使用 Unicode 的方式生成才符合你的需求 download.zip

    再说一个题外话,你的问题和需求,和这个 issues 的主题不是同个内容,你本应新建一个 issues 来说你的事情,现在题主莫明收了一大堆与其不相关的邮件提醒

    我觉得不管怎么样生成,总会生成一个Unicode,只要有Unicode冲突,不管你使用什么方式 都会出现我这种情况

    Reply