72 lines
1.5 KiB
Vue
72 lines
1.5 KiB
Vue
<script setup>
|
|
import {Modal} from 'bootstrap'
|
|
import {onMounted, ref, watch, useSlots, useAttrs, computed} from 'vue';
|
|
|
|
//const emit = defineEmits(['open', 'close'])
|
|
// const slots = useSlots()
|
|
// const attrs = useAttrs()
|
|
|
|
const props = defineProps({
|
|
show: Number,
|
|
hide: Number,
|
|
size: String,
|
|
needFooter: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const refModal = ref(null)
|
|
|
|
const show = computed(() => {
|
|
return props.show
|
|
})
|
|
|
|
const hide = computed(() => {
|
|
return props.hide
|
|
})
|
|
|
|
let BsModal = null
|
|
|
|
onMounted(() => {
|
|
BsModal = new Modal(refModal.value)
|
|
})
|
|
|
|
watch(show, async (to, from) => {
|
|
if (to > from) {
|
|
BsModal.show()
|
|
}
|
|
})
|
|
|
|
watch(hide, async (to, from) => {
|
|
if (to > from) {
|
|
BsModal.hide()
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" ref="refModal">
|
|
<div class="modal-dialog" :class="size">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<slot name="modal-title"></slot>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<slot name="modal-body"></slot>
|
|
</div>
|
|
<div class="modal-footer" v-if="needFooter">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
|
<button type="button" class="btn btn-primary">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|