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
Mongolia
Korea China
Sweet website , super design , rattling clean and apply friendly . Elva Vito Remmer