Search for a command to run...
Exploring the new tools and techniques on frontend development. Loves to meet up with new people and participate in the community. I do interesting stuff on codepen https://codepen.io/nirazanbasnet
No comments yet. Be the first to comment.
A few months ago, my product manager dropped something in the team channel. "We are adding an AI agent to the platform next quarter. It will handle follow-ups automatically." Just like that. One messa
f you’re diving into React, you’ve likely come across the ‎useRef hook. But what exactly is ‎useRef(), and how can it make your life easier? In this post we’ll cover what ‎useRef is, walk through five
A bug that only happens for some users, that you can never reproduce, that isn't in your code. Welcome to the React + browser-translation crash — what causes it, why it's so sneaky, and the battle-tested one-file fix.
Upgrading a core production database is usually the stuff of dev nightmares. It often involves maintenance windows, scheduled downtime, and the looming fear of a botched migration. But what if you cou
We are moving into products that adapt, predict and react with real context. Designing only interfaces is not enough anymore. We are designing experiences that understand the user. Designers and digital agencies are now challenged to move beyond trad...
Engineering at JoBins
167 posts
Welcome to Engineering at JoBins — where we share the stories, insights, and lessons from building a world-class hiring platform. From system design and scalability to developer tools and team culture, our engineers write about the real challenges we solve every day. Whether you're a curious developer or a fellow builder, we hope our experiences inspire and inform your own engineering journey.
When developing a large application with multiple components, it is important to prioritize creating components that are customizable, scalable, and reusable. However, it is common to overlook implementing certain functionalities like outside click functionality for components such as popovers or popups. This can result in bugs that need to be fixed later on.
In this blog post, we will discuss how to create an outside click wrapper component in Vue.js. This component will enable users to open a popover by clicking on a specific element and close it by clicking anywhere outside the popover. We will analyze the provided code step by step to understand how it works and achieves the desired behavior.
Code Explanation
We begin by creating the PopupWrapper.vue component and utilizing the Composition API to build it. The Composition API is a feature that offers an alternative approach to organizing and reusing logic within Vue components. It works alongside the Options API, which was the primary API in Vue.js 2.
Step 1
<template>
<div ref="customDiv">
<div @click="toggle">
<slot name="header"/>
</div>
<div v-if="showPopup" @click.stop>
<slot name="content"/>
</div>
</div>
</template>
To create an outside click popup component, we first assign a reference to <div> element using ref="customDiv". This reference allows us to access the element in the component's JavaScript code. We utilize Slots to insert dynamic content into components from the parent component. In this scenario, the header and content slots will be provided by the parent component when using this popup component.
We also use the @click.stop directive to prevent the click event from propagating to parent elements. This ensures that clicking inside the popup content does not trigger the outside click behavior.
Overall, this template forms the foundation for an outside click popup component.
Step 2
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
const showPopup = ref(false)
const customDiv = ref(null)
const toggle = () => {
showPopup.value = !showPopup.value
}
const handleClickOutside = (event) => {
if (customDiv.value && !customDiv.value.contains(event.target)) {
showPopup.value = false
}
}
onMounted(() => {
document.addEventListener("click", handleClickOutside)
})
onUnmounted(() => {
document.removeEventListener("click", handleClickOutside)
})
</script>
The provided code showcases the usage of the setup syntax of the Composition API, creating a more declarative approach to defining component logic. It utilizes the ref function to create reactive variables like showPopup and customDiv. The toggle function toggles the visibility of the popup by negating showPopup.value. The handleClickOutside function is crucial as it checks if a click occurred outside the component and hides the popup accordingly. The onMounted hook adds a "click" event listener to the document, triggering handleClickOutside, while the onUnmounted hook removes the event listener to prevent memory leaks. This code provides a comprehensive implementation of the outside click popup functionality in Vue.js.
Code Example
<template>
<div id="app">
<PopupWrapper>
<template #header>
<div class="popover">Open Popover</div>
</template>
<template #content>
<div class="popover-content">This is a Popup Content</div>
</template>
</PopupWrapper>
</div>
</template>
<script setup>
import PopupWrapper from './components/PopupWrapper.vue';
</script>
Overall, we have the template that consists of a root <div> element with the ID "app" serving as the Vue application's root. Inside this <div>, there is a PopupWrapper component that provides the outside click popup functionality. The PopupWrapper component contains two elements: one for the header slot (#header) and one for the content slot (#content). The header slot includes an element with the class "popover" and the text "Open Popover", which will be inserted into the header slot. Similarly, the content slot contains an element with the class "popover-content" and the text "This is a Popup Content", which will be inserted into the content slot.
Note: CSS Styling in this component is optional. You can style the code with your preference.
You can access the code here.
Additionally, you may refer to the following blog post here that provides detailed information about Vue custom directives and how you can utilize them to implement similar outside click functionality in your applications.
đź‘Źđź‘Ź In conclusion, the "Outside Click Popup Component Functionality on Vue.js" tutorial demonstrates how to create an interactive and reusable popup component with outside click detection using Vue.js and the Composition API. By following this tutorial, you can enhance your Vue.js applications with a convenient and user-friendly popup feature. I suggest you give a try on your project and enjoy it!
Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.
Till then, Keep on Hacking, Cheers