47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
|
import Vue from 'vue';
|
||
|
|
import Icon from "./Icon";
|
||
|
|
|
||
|
|
export default Vue.component('modal', {
|
||
|
|
components: {
|
||
|
|
Icon,
|
||
|
|
},
|
||
|
|
|
||
|
|
props: {
|
||
|
|
modalName: { type: String, default: 'modal' },
|
||
|
|
show: { type: Boolean, default: false },
|
||
|
|
closeOnEsc: { type: Boolean, default: true },
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted: function () {
|
||
|
|
if (this.$props.closeOnEsc) {
|
||
|
|
document.addEventListener('keydown', e => {
|
||
|
|
if (this.show && e.key === 'Escape') {
|
||
|
|
this.close();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
close: function () {
|
||
|
|
this.$emit('close', this.$props.modalName);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
template: `
|
||
|
|
<transition name="modal">
|
||
|
|
<div class="modal-mask" v-show="show" v-on:click="close">
|
||
|
|
<div class="modal-container" @click.stop>
|
||
|
|
<icon name="x"
|
||
|
|
class="absolute pin-r pin-t m-2 text-grey cursor-pointer"
|
||
|
|
aria-label="Close modal"
|
||
|
|
role="button"
|
||
|
|
v-on:click="close"
|
||
|
|
/>
|
||
|
|
<slot/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
`
|
||
|
|
})
|