Ciao Vue Dialog
Vue Dialog Component
Feature
- Basic title, content in dialog
- Three size(large, middle, small)
- Can catch and handle accept/dismiss action like JavasScript confirm
- Inject custom vue component into dialog
Dependencies
- jQuery
- jquery-mousewheel
- Animate.css
- Bootstrap 3/4 (just for footer button, your can custom it's class name for your Bootstrap version)
- Vue.js
Required
- Vue.js 2.x
Installation
npm
npm install ciao-vue-dialog --save
or yarn
yarn add ciao-vue-dialog
Base Usage
Install VueDialog component in App.vue
<!--plugin will auto mount dialog in here--> show dialog
Remember import style file in App.vue
style
String
You can setup style by style property
There has four Bootstrap style(success, primary, info, warning, danger)
this
content
String
this
close
Number
You can let dialog close automatically by configuring this property
Just pass delay time(milliseconds)
this
closeCallback
Function
You can do something by using closeCallback property
this
size
String
We provide three size: 'lg', 'md', 'sm'
Default size is md
this
z-index
You can setup z-index by zIndex property of component
Default value is 1000
App.vue
accept
Object
When you wanna use dialog as confirm's accept action
accept.callback
You can do anything when user accept confirm by config callback property
methods: { this } { // do something here after accept }
accept.label
Custom accept button label
Default is 'Accept'
String
this
accept.style
Custom accept button style by using Bootstrap class name
Default is 'primary'
String
this
accept.commitOnEnter
If this property set as true
User can commit accept action by pressing Enter key
Boolean
dismiss
Object
When you wanna use dialog as confirm's dismiss action
dismiss.callback
You can do anything when user dismiss confirm by config callback property
If you don't want to do anything after dismiss, you can skip this property
methods: { this } { // do something here after dismiss }
dismiss.label
Custom dismiss button label
Default is 'Dismiss'
String
this
dismiss.style
Custom dismiss button style by using Bootstrap class name
Or if you want to use Bootstrap 4 button's class name
Default is 'light'
String
this
dismiss.commitOnEsc
If this property set as true
User can commit dismiss action by pressing ESC key
Boolean
component
Vue Component
You can inject a custom vue component into dialog by this property
methods: { this }
Bind data to custom component, and get it in accept/dismiss callback
Sometimes you need to inject a custom vue component and bind a data like a subscription button
You can use updateData event to sync data and get data in accept callback by this way
Main
methods: { this } // you can get data which bind in custom component in accept callback { if!data return } { // You can get data on dismiss, too }
FormCustomComponent.vue
Enter your email, we will send you product menu
Commit accept/dismiss action in custom component
You can commit accept/dismiss action by using $emit('commitAccept')、$emit('commitDismiss') in custom component
You should use this two event be carefully
Here is example which commit accept action when user press Enter key
Pass more data when inject custom component
Sometimes you may want pass more data (like user profile) into custom component
You can use meta property like this way when you active $dialog
this
And you can get meta in custom component by using vue props feature
props: meta: default: null { }
Loading
If your accept/dismiss callback is async, it will trigger loading before async process is finished.
Also, if you has some async process in custom component, you can use setLoader method to set loading status.
{ this } methods: async { // start loading this await // stop loading this }
Action Error
When some error throw from actions(accept/dismiss) callback.
Dialog component will catch this error and pass it to your custom component.
You can get and handle error property in your custom component.
Script
this
CustomComponent
{{error.reason1}} {{error.reason2}}