I'm currently creating a loader component to display when my API calls are loading. I want this loader to be a versatile container that can be placed around any content. However, my knowledge of emits is limited and I'm unsure of how to properly implement them in this situation. Can you help me identify what I am missing?
Here is the code for my AppLoader.vue component:
<script setup lang="ts">
let isLoading = ref(false);
const toggleLoader = () => {
isLoading.value = !isLoading;
};
</script>
<template>
<div
v-if="isLoading"
:class="isLoading ? 'loading' : ''"
class="loader full-height full-width"
>
LOADER HERE
</div>
<slot></slot>
</template>
<style src="./app-loader.css" scoped lang="postcss" />
And here's the CSS code from app-loader.css:
.loader {
background: red;
width: 100%;
height: 100%;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10;
opacity: 0.5;
}
.loading {
display: block;
}
To utilize the AppLoader component on a page, use the following syntax:
<AppLoader>Content that requires loading time...</AppLoader>
Lastly, in the script section of the page, include the following logic:
<script lang="ts" setup>
const emit = defineEmits(["toggleLoader"])
onMounted(() => {
emit("toggleLoader", true); // Display the loader by adding a specific class
// Perform the necessary API calls and data processing
emit("toggleLoader", false) // Hide the loader by removing the specified class
});
</script>