Stackable Scrollable Dialog Box Component – v-easy-dialog

Install & Download:

# Yarn
$ yarn add v-easy-dialog
# NPM
$ npm i v-easy-dialog --save

Description:

An easy yet configurable dialog box component for Vue.js.

Features:

• Stackable.
• Scrollable
• Fullscreen mode just like the modal
• Automatic focus trap
• Smooth open/close transitions.

How to use it:

1. Import and register the component.

import VEasyDialog form 'v-easy-dialog'
export default {
    components: {
      VEasyDialog
    }
}

2.Create a basic dialog with a close button.

<v-easy-dialog v-model="simpleDialog">
  Dialog Content Here
  <button @click="simpleDialog = false">Close</button>
</v-easy-dialog>

3. Possible component props to config the dialog box.

value: { type: Boolean, default: false },
width: { type: String, default: '600px' },
growContent: { type: Boolean, default: true },
maxHeight: { type: String, default: '90%' },
fullscreen: { type: Boolean, default: false },
backgroundBtnTag: { type: String, default: 'button' },
persistent: { type: Boolean, default: false },
backdropClass: { type: undefined },
backdropStyle: { type: undefined },
focusOn: { type: String, default: undefined }

Preview: