Vue.js에서 공통 레이어 팝업 만들기 2가지: 전역 컴포넌트와 Vue 프로토타입 활용

by

Vue.js를 사용하면 프로젝트 전반에 걸쳐 공통으로 사용되는 UI 요소를 간편하게 구현할 수 있습니다. 이번에는 공통 레이어 팝업을 만들어보겠습니다. 여러 방법 중에서 전역 컴포넌트와 Vue 프로토타입을 활용하는 방법을 살펴보겠습니다.



1. 전역 컴포넌트로 레이어 팝업 생성

먼저, GlobalPopup이라는 전역 컴포넌트를 작성합니다. 이 컴포넌트는 팝업을 열고 닫는 메서드를 가지고 있습니다.

<!-- GlobalPopup.vue -->
<template>
  <div v-if="show">
    <!-- 팝업 컨텐츠 -->
    <div class="popup">
      <!-- 내용 -->
      <slot></slot>
      <!-- 닫기 버튼 -->
      <button @click="closePopup">닫기</button>
    </div>
    <!-- 배경 레이어 -->
    <div class="overlay" @click="closePopup"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    openPopup() {
      this.show = true;
    },
    closePopup() {
      this.show = false;
    },
  },
};
</script>

<style scoped>
/* 스타일링 */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 1000;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>

이렇게 작성한 컴포넌트를 GlobalPopup으로 등록하고, 다른 컴포넌트에서 필요할 때 이를 사용할 수 있습니다.

<!-- AnyComponent.vue -->
<template>
  <div>
    <!-- 다른 컴포넌트 내에서 버튼 등을 통해 팝업 열기 -->
    <button @click="openPopup">팝업 열기</button>

    <!-- GlobalPopup 컴포넌트 사용 -->
    <GlobalPopup ref="globalPopup">
      <!-- 팝업 내용 -->
      <h2>팝업 내용</h2>
    </GlobalPopup>
  </div>
</template>

<script>
import GlobalPopup from "@/components/GlobalPopup.vue";

export default {
  methods: {
    openPopup() {
      // GlobalPopup 컴포넌트의 메서드 호출
      this.$refs.globalPopup.openPopup();
    },
  },
  components: {
    GlobalPopup,
  },
};
</script>




2. Vue 프로토타입에 메서드 추가

또 다른 방법은 Vue 프로토타입에 직접 메서드를 추가하는 것입니다. 이렇게 하면 어느 컴포넌트에서든 편리하게 사용할 수 있습니다.

// main.js
import Vue from "vue";
import App from "./App.vue";
import GlobalPopup from "@/components/GlobalPopup.vue";

Vue.prototype.$openPopup = function() {
  this.$refs.globalPopup.openPopup();
};

new Vue({
  render: (h) => h(App),
  components: {
    GlobalPopup,
  },
}).$mount("#app");


그 후에는 어느 Vue 컴포넌트에서든 $openPopup 메서드를 호출하여 팝업을 열 수 있습니다.

<!-- AnyComponent.vue -->
<template>
  <div>
    <!-- 다른 컴포넌트 내에서 버튼 등을 통해 팝업 열기 -->
    <button @click="$openPopup">팝업 열기</button>

    <!-- GlobalPopup 컴포넌트 사용 -->
    <GlobalPopup ref="globalPopup">
      <!-- 팝업 내용 -->
      <h2>팝업 내용</h2>
    </GlobalPopup>
  </div>
</template>

<script>
import GlobalPopup from "@/components/GlobalPopup.vue";

export default {
  components: {
    GlobalPopup,
  },
};
</script>

이렇게 두 가지 방법으로 Vue.js에서 공통 레이어 팝업을 만들어보았습니다. 상황에 맞게 선택하여 사용하면 프로젝트의 확장성과 유지보수성을 향상시킬 수 있습니다.



Leave a Comment