How to add Dialog Component to Vuejs App

In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App.

Demo

vue-dialog-component-example

Create Dialog component

In src folder, create components, then add GkzDialog.vue file:

src/components/GkzDialog.vue

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

The button controls whether Dialog shows or not by changing isDialogOpened status.

Source code

Run commands:
npm install
npm run dev

vue-dialog-component-example

By grokonez | June 7, 2019.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*