0
0
Fork 0

Add a closable property to the modal animation

This commit is contained in:
Oliver-Akins 2020-12-13 16:52:33 -07:00
parent e5328dd1fb
commit 2eec1880c6

View file

@ -2,8 +2,9 @@
<transition name="fade" @after-enter="content = true">
<div
v-if="show"
class="modal-container clickable"
@click.self.stop="content = false"
class="modal-container"
:class="closable ? 'clickable' : ''"
@click.self.stop="handleBackgroundClick"
>
<transition name="burst" @after-leave="$emit('closed')">
<div v-if="content" class="modal unclickable">
@ -22,10 +23,22 @@ export default {
required: true,
type: Boolean,
},
closable: {
required: false,
type: Boolean,
default: true,
}
},
data() {return {
content: false,
}},
methods: {
handleBackgroundClick() {
if (this.closable) {
this.content = false;
};
},
},
}
</script>