69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Button to open the modal -->
|
|
<button type="button" :class="thisClass" @click="openModal">
|
|
🍪 Read Bite ({{ minRead }})
|
|
</button>
|
|
|
|
<!-- Bootstrap Modal -->
|
|
<div
|
|
class="modal"
|
|
ref="modal"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-labelledby="modalLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div
|
|
class="modal-header text-start font-family-roboto-condensed fw-bolder"
|
|
>
|
|
<h5 class="modal-title" id="modalLabel">The Bite: {{ title }}</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
@click="closeModal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body text-start small">
|
|
<p v-html="bite"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Modal } from "bootstrap";
|
|
|
|
export default {
|
|
name: "OpenNewsBite",
|
|
props: ["title", "bite", "thisClass", "minRead"],
|
|
data() {
|
|
return {
|
|
modalInstance: null,
|
|
};
|
|
},
|
|
methods: {
|
|
openModal() {
|
|
this.modalInstance = new Modal(this.$refs.modal, {
|
|
keyboard: false,
|
|
});
|
|
this.modalInstance.show();
|
|
},
|
|
closeModal() {
|
|
if (this.modalInstance) {
|
|
this.modalInstance.hide();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Add any additional styling here */
|
|
</style>
|