Vue mixin for dialog components to enable dialog closing on browser's back button clicked
$ npm install vue-dialog-mixin
Vuex store to store the dialogs state.
I use vuetify ui framework as an example below:
<template>
<v-row justify="center">
<v-btn @click.stop="dialog = true">
Open Dialog
</v-btn>
<v-dialog v-model="dialog">
<v-card>
<v-card-title class="headline">Example</v-card-title>
<v-card-text>
Click browser's back button to close me.
</v-card-text>
<v-card-actions>
<v-btn @click="closeDialog">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
<script>
import dialogMixin from "vue-dialog-mixin"
export default {
mixins: [dialogMixin]
}
</script>
Import vue-dialog-mixin in the script section
Define vue-dialog-mixin variable in the mixins hook
Must use dialog
for the dialog v-model directive
You can use showDialog()
method to show the dialog instead of using dialog = true
It's the same to closing the dialog, you can use closeDialog()
instead of dialog = false
to close the dialog