Dialog Box

To create full featured dialog element (alert, confirm, custom messages) use this component.

Code:

  
    HTML
    
  
  <fvDialog v-model="dialog">
  <!-- Dialog Contents -->
</fvDialog>

  
    Javascript
    
  
  export default {
    data () {
        return {
            dialog: false
        }
    }
}

Examples:

Normal

Modal

Scrollable Contents

Custom Content and Animation

Notes:

If you want to create modal dialog, pass value prop via :value and if you dont, pass it via v-model.
fvDialog is really developer friendly. You can put any contents you want into this and create your custom in/out animation.
fvDialog tries to keep focus inside. Basicly the last focusable element inside will focus on open, but element with [autofocus] attr has higher prority.

API:

Name	Type	Default	Description
value	Boolean	false	Visibility of dialog.
animation	String	'fv-fade'	A CSS class to handle opening and closing animation (will directly set to Vue.js transition name)

Name	Params	Description
input	newVisibilityState	Fired when component request to change value (close and open request by dialog).
open	---	Fired when dialog opened.
close	---	Fired when dialog closed.

Name	Description
default	---