53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<template>
|
|
<div class="modal" :id="modalId" tabindex="-1">
|
|
<div class="modal-dialog" :class="[small ? '' : 'modal-lg']">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{{ title }}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="getCloseText"
|
|
@click="close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="text-center" v-if="loading">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
|
|
</div>
|
|
</div>
|
|
<slot v-else>
|
|
</slot>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<slot name="footer">
|
|
</slot>
|
|
<button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">{{
|
|
getCloseText }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
'modalId': { type: String, required: true },
|
|
'title': { type: String, required: true },
|
|
'closeText': { type: String, required: false, default: '' },
|
|
'small': Boolean,
|
|
'loading': Boolean,
|
|
},
|
|
computed: {
|
|
getCloseText() {
|
|
return this.closeText == '' ? this.$t('base.Close') : this.closeText;
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
},
|
|
});
|
|
</script>
|