57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template lang="pug">
|
|
.modal.fade.in.background-darken(ref='modal', style="display:block", tabindex='-1', role='dialog', @click.self='close()', @keyup.esc='close()')
|
|
.modal-dialog.modal-lg(role='document')
|
|
.modal-content
|
|
.modal-header(v-if='hasHeader')
|
|
button.close(type='button', data-dismiss='modal', aria-label='Close', @click='close()')
|
|
span(aria-hidden='true') ×
|
|
h4.modal-title
|
|
slot(name='header') Modal
|
|
.modal-body
|
|
slot(name='body') Body
|
|
.modal-footer(v-if='hasFooter')
|
|
slot(name='footer')
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
hasHeader: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasFooter: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.$nextTick(function() {
|
|
this.$refs.modal.focus();
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
close() {
|
|
this.$emit('close');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.background-darken {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.modal.in {
|
|
overflow-x: auto;
|
|
overflow-y: scroll;
|
|
}
|
|
</style>
|