레이어팝업

 

1. 템플릿 (template) 구성

코드 스니펫

<template>
  <button @click="showPopup('sample1')">Show Default Popup</button>
  <button @click="showPopup('sample2')">Show Slide Up Popup</button>
  <button @click="showPopup('sample3')">Show Slide Down Popup</button>
  <button @click="showPopup('sample4')">Show Flip Popup</button>

  <div v-for="popup in popups" :key="popup.id" :class="{ active: popup.id === currentPopup }" class="popup">
    </div>
</template>

 

 

2. 스크립트 (script) 구성

 

<script setup>
import { ref } from 'vue';

const popups = ref([
  { id: 'sample1', content: 'Default Popup' },
  { id: 'sample2', content: 'Slide Up Popup' },
  { id: 'sample3', content: 'Slide Down Popup' },
  { id: 'sample4', content: 'Flip Popup' },
]);

const currentPopup = ref(null);

const showPopup = (id) => {
  currentPopup.value = id;
};
</script>

아이디로 레이어팝업

<!-- LayerPopup.vue -->
<template>
  <transition :name="animationClass">
    <div v-if="visible" class="popup-overlay" @click.self="closePopup">
      <div :class="['popup-content', animationClass]" :id="id">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue'
 
// Props 정의
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  class: {
    type: String,
    default: ''  // 기본 애니메이션 클래스
  },
  id: {
    type: String,
    default: ''
  }
})
 
const emit = defineEmits(['update:visible'])
 
// transition과 content에 적용할 클래스 결정
const animationClass = props.class
 
// 팝업 닫기 함수
const closePopup = () => {
  emit('update:visible', false)
}
</script>
 
<style scoped>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.popup-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
</style>
 
<!-- 애니메이션 스타일 -->
<style scoped>
/* 기본형: 트랜지션하면서 나타나는 애니메이션 */
.popup-content.default-enter-active,
.popup-content.default-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.popup-content.default-enter, .popup-content.default-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
 
/* 위에서 나오는 애니메이션 */
.popup-content.slide-up-enter-active,
.popup-content.slide-up-leave-active {
  transition: transform 0.3s ease;
}
.popup-content.slide-up-enter, .popup-content.slide-up-leave-to {
  transform: translateY(-100%);
}
 
/* 아래서 올라가는 애니메이션 */
.popup-content.slide-down-enter-active,
.popup-content.slide-down-leave-active {
  transition: transform 0.3s ease;
}
.popup-content.slide-down-enter, .popup-content.slide-down-leave-to {
  transform: translateY(100%);
}
 
/* 플립형: 작았다가 커지는 애니메이션 */
.popup-content.flip-enter-active,
.popup-content.flip-leave-active {
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.popup-content.flip-enter, .popup-content.flip-leave-to {
  transform: scale(0.5);
  opacity: 0;
}
</style>

<template>
  <div class="container">
    <!-- 팝업 버튼 -->
    <button @click="showPopup('sample1')">Show Default Popup</button>
    <button @click="showPopup('sample2')">Show Slide Up Popup</button>
    <button @click="showPopup('sample3')">Show Slide Down Popup</button>
    <button @click="showPopup('sample4')">Show Flip Popup</button>
 
    <!-- 레이어 팝업 컴포넌트 -->
    <LayerPopup :visible.sync="isPopupVisible" class="default" id="sample1" v-if="currentPopup === 'sample1'">
      <h2>내용1</h2>
      <p>This is a sample popup with animation.</p>
      <button @click="closePopup">Close</button>
    </LayerPopup>
 
    <LayerPopup :visible.sync="isPopupVisible" class="slide-up" id="sample2" v-if="currentPopup === 'sample2'">
      <h2>내용2</h2>
      <p>This is a sample popup with animation.</p>
      <button @click="closePopup">Close</button>
    </LayerPopup>
 
    <LayerPopup :visible.sync="isPopupVisible" class="slide-down" id="sample3" v-if="currentPopup === 'sample3'">
      <h2>내용3</h2>
      <p>This is a sample popup with animation.</p>
      <button @click="closePopup">Close</button>
    </LayerPopup>
 
    <LayerPopup :visible.sync="isPopupVisible" class="flip" id="sample4" v-if="currentPopup === 'sample4'">
      <h2>내용4</h2>
      <p>This is a sample popup with animation.</p>
      <button @click="closePopup">Close</button>
    </LayerPopup>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import LayerPopup from './LayerPopup.vue'
 
const isPopupVisible = ref(false)
const currentPopup = ref('')
 
// 팝업 표시 함수
const showPopup = (id) => {
  currentPopup.value = id
  isPopupVisible.value = true
}
 
// 팝업 닫기 함수
const closePopup = () => {
  isPopupVisible.value = false
}
</script>
 
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
 
button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
 
button:hover {
  background-color: #0056b3;
}
</style>