<dialog> close button: how does it work?

[bondythegreat]

hi i use <dialog> and it automatically show X button on top-right inside header, which is good.
however, that close button not working in my page. i dont see it has props and calling any method for me to debug?
what is the behavior and control this button's event?

]

Code: Select all

<Dialog
      :visible="modalVisible"
      :maximizable="true"
      :modal="true"
      :reject="closeModal"
      :closeOnEscape="true"
      :dismissableMask="true"
      :style="{ width: '100vw' }"
    >
      Content
    </Dialog>

[adlaws]

Howdy,

I had a similar issue, and looking through the source on GitHub I found that the Dialog component emits an `update:visible` event with a value of `false` when the close icon is clicked.

If you're interested, the code is here:

https://github.com/primefaces/primevue/ ... Dialog.vue

Check around line 13 for the close button in the template, and line 93 for the `close()` method that gets called on the click event.

Anyway, because of this, all you need to do is add the `sync` directive to the `visible` prop of the Dialog to enable 2-way data synchronization - the dialog will the automatically disappear without further effort required on your part.

If you'd like to know more about this `update:something` event and `sync` stuff, check the Vue documentation here:

https://vuejs.org/v2/guide/components-c ... c-Modifier

Anyway, all of this just means that your Dialog component setup becomes something like...

Code: Select all

<Dialog
            :visible.sync="show"
            :modal="true"
>

An alternative (equivalent?) option is to add an event handler for this event to do something a bit more complicated (like confirm you want to close the dialog or something).

Code: Select all

<template>
...
    <Dialog
        :visible="show"
        :modal="true"
        @update:visible="handleClose"
    />
...
</template>

<script>
...
data()
{
	return {
		show: true;
	}
},
methods:
{
    handleClose(shouldShow)
    {
    	// shouldShow will always be `false`, so this is a bit redundant
    	console.log(shouldShow);
    	// do some special handling
    	if(/*some condition is satisfied*/)
    	{
    	    this.show = false;
    	}
        else
        {
            // don't close this dialog
        }
    }
}
...
</script>

Hope this is helpful!

Andrew