명명된 슬롯이 있는 VueJS를 사용하여 재사용 가능한 모달을 만드는 방법

안녕하세요 독자들…

오늘 블로그에서는 VueJS의 슬롯을 사용하여 재사용 가능한 모달을 만드는 방법을 살펴보겠습니다.

대부분의 경우 새 페이지로 이동하고 일부 작업을 수행하고 기본 페이지로 다시 리디렉션하는 것을 원하지 않습니다. 이 경우 같은 페이지에서 열리는 모달을 사용합니다. 일부 정보를 추가, 편집 또는 표시하는 데 사용할 수 있습니다. 명명된 슬롯이 있는 모달을 만드는 방법을 살펴보겠습니다.

먼저 Modal.vue 디렉토리에 src/components/라는 구성 요소를 만들고 아래 코드를 추가해야 합니다.

<template>
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div
        class="modal"
        role="dialog"
        aria-labelledby="modalTitle"
        aria-describedby="modalDescription"
      >
        <header class="modal-header" id="modalTitle">
          <slot name="header"> Default Header </slot>
          <button
            type="button"
            class="close-btn"
            @click="close"
            aria-label="Close Modal"
          >
            x
          </button>
        </header>

        <main class="modal-body" id="modalDescription">
          <slot name="body"> Default body content </slot>
        </main>

        <footer class="modal-footer">
          <slot name="footer"> Default Footer! </slot>
          <button
            type="button"
            class="btn-open-modal"
            @click="close"
            aria-label="Close Modal"
          >
            Close Modal
          </button>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Modal",
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style>
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #FFFFFF;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  width: 80%;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  position: relative;
  border-bottom: 1px solid rgb(227, 231, 233);
  color: blue;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid rgb(227, 231, 233);
  flex-direction: column;
  justify-content: flex-end;
}

.modal-body {
  position: relative;
  padding: 20px 10px;
}

.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  color: red;
  background: transparent;
}

.btn-open-modal {
  color: white;
  background: green;
  border: 1px solid green;
  border-radius: 4px;
  margin: 20px auto;
  padding: 5px;
  width: 40%;
}
.modal-fade-enter,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>

위의 코드에서 주어진 이름에 따라 데이터를 보유하는 각각의 이름을 가진 세 개의 슬롯을 만들었습니다. 위의 슬롯 중 하나가 기본 구성 요소에서 이 모달을 사용할 때 바닥글로 이름을 지정한 다음 슬롯 '바닥글'에서 제공하는 데이터/콘텐츠를 사용하면 해당 콘텐츠가 해당 바닥글 슬롯에 배치됩니다.

예를 들어 보겠습니다.

이제 방금 만든 모달을 사용할 App.vue 파일로 이동하여 아래 코드를 추가합니다.

<template>
  <div id="app">
    <h3>Example of Reusable Modal using Slot</h3>
    <button type="button" class="btn" @click="openModal()">Open Modal</button>
    <Modal v-show="visible" @close="close">
      <template v-slot:header> Modal
 Header </template>

      <template v-slot:body> You can put your contents within body </template>

      <template v-slot:footer> You can put your footer here </template>
    </Modal>
  </div>
</template>

<script>
import Modal from "./components/Modal";

export default {
  name: "App",
  components: {
    Modal,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    openModal() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn {
  background-color: rgb(96, 96, 214);
  color: #fff;
  border-radius: 4px;
  padding: 8px;
  border: none;
  font-weight: bold;
}
</style>

위의 코드에서 볼 수 있듯이 <Modal>에서 슬롯과 이름으로 템플릿을 정의했습니다. 여기에 제공된 콘텐츠/데이터는 기본 Modal 구성 요소에서 대체됩니다.

이제 동일한 방식으로 필요한 콘텐츠를 제공하여 다른 구성 요소에서도 모달을 정의할 수 있습니다.

게시물이 마음에 들면 내 블로그를 구독하십시오.

[삭제 된 사용자]

더 나은 이해를 위해 샌드박스를 참조할 수 있습니다.



읽어 주셔서 감사합니다. 🦄 ❤️