In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App.
Demo
Create Dialog component
In src folder, create components, then add GkzDialog.vue file:
src/components/GkzDialog.vue
<template> <div class="modal" v-show="show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title mx-auto">{{title}}</h5> </div> <div class="modal-body" v-if="announcement"> <p>{{announcement}}</p> </div> <div class="modal-footer"> <button @click="dismiss" type="button" class="btn btn-primary mx-auto">OK</button> </div> </div> </div> </div> </template> <script> export default { props: { show: { type: Boolean, required: true }, title: { type: String, required: true }, announcement: { type: String, required: false } }, methods: { dismiss() { this.$emit("close"); } }, created() { const escHandler = e => { if (e.key === "Escape" && this.show) { this.dismiss(); } }; document.addEventListener("keydown", escHandler); this.$once("hook:destroyed", () => { document.removeEventListener("keydown", escHandler); }); } }; </script> <style> .modal { background: #aaa; display: flex; } </style> </script> <style> .modal { background: #aaa; display: flex; } </style> |
Our dialog component has props that accepts parent component to pass title, announcement and show status to it.
There is dismiss() method that emits close event to parent for closing the dialog.
We have 2 ways to close the dialog:
– click on the button
– press Escape keyboard button: use global EventListener for “keydown” event and escHandler that also calls code>dismiss() method.
Remember that we need to set CSS display: flex; to display the dialog.
Create component that contains Dialog component
Now we’re gonna create the parent component that contains Dialog component.
This component should pass title, announcement and show status as props to Dialog child component.
src/App.vue
<template> <div class="mx-auto" style="width: 200px;"> <h2>grokonez.com</h2> <button type="button" class="btn btn-primary mt-3" @click="isDialogOpened = true">Open Dialog</button> <gkz-dialog :show="isDialogOpened" title="grokonez.com" announcement="At this website, you will find many Simple, feasible, practical, integrative Programming Tutorials." @close="isDialogOpened = false"/> </div> </template> <script> import GkzDialog from "./components/GkzDialog.vue"; export default { components: { GkzDialog }, data() { return { isDialogOpened: false }; } }; </script> |
The button controls whether Dialog shows or not by changing isDialogOpened status.
Source code
Run commands:
– npm install
– npm run dev