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:
Download Details:
Author: WoodyDark
Live Demo: https://r2xwr.csb.app/
Download Link: https://github.com/WoodyDark/v-easy-dialog/archive/main.zip
Official Website: https://github.com/WoodyDark/v-easy-dialog
Install & Download:
# Yarn
$ yarn add v-easy-dialog
# NPM
$ npm i v-easy-dialog --save