influence/components/common/confirmDialog.vue

<template>
  <v-dialog v-model="isOpenPop" persistent width="32.81rem">
    <div class="v-common-dialog-wrapper custom-dialog alert">
      <div class="modal-tit">
        <strong>{{ popUpOption.title }}</strong>
        <button class="btn-close" @click="fnProcNo"></button>
      </div>
      <!-- 신뢰할수있는 코드... 작성자만 넣을수있기때문에 -->
      <div class="v-common-dialog-content">
        <p class="alert-txt" v-html="popUpOption.content"></p>
      </div>
      <div class="btn-wrap">
        <v-btn class="custom-btn btn-white mini" v-if="popUpOption.no" @click="fnProcNo"
          ><i class="ico"></i>{{ popUpOption.no.text }}</v-btn
        >
        <v-btn class="custom-btn btn-blue mini" @click="fnProcYes"
          ><i class="ico"></i>{{ popUpOption.yes.text }}</v-btn
        >
      </div>
    </div>
  </v-dialog>
</template>

<script setup>
  import { useRouter, useRoute } from "vue-router";
  let pageId = "confirmDialog";
  const router = useRouter();
  const route = useRoute();

  const { $eventBus } = useNuxtApp();

  // data
  let isOpenPop = ref(false); // 팝업 활성화 여부
  // interface inPopUpOption {
  //   id: string,
  //   title: string,
  //   content: string,
  //   yes: {
  //     text: string,
  //     param?: any,
  //     event?: string,
  //     isProc: boolean,               // isProc일경우 확인 버튼을 누르면 팝업이 닫히면서 특정 동작을 해야함
  //   },
  //   no?: {
  //     text: string,
  //     isProc: boolean,               // isProc일경우 확인 버튼을 누르면 팝업이 닫히면서 특정 동작을 해야함
  //   }
  // }
  let popUpOption; // 팝업 데이터
  $eventBus.off("OPEN_CONFIRM_POP_UP");
  $eventBus.on("OPEN_CONFIRM_POP_UP", (e) => {
    popUpOption = e; // 반응형일 필요가 없다.
    isOpenPop.value = true;
  });
  // methods
  function fnProcYes() {
    if (popUpOption.yes.isProc) {
      if (popUpOption.yes.event)
        $eventBus.emit(popUpOption.yes.event, popUpOption.yes.param);
      // 하나의 컴포넌트에서 여러개의 팝업창이 필요한 경우
      else $eventBus.emit(`${popUpOption.id}_PROC_YES`, popUpOption.yes.param); // 하나의 컴포넌트에서 하나의 팝업창만 열릴경우
    }
    if (popUpOption.reload) {
      window.location.reload();
    }
    isOpenPop.value = false;
  }
  function fnProcNo() {
    if (popUpOption.hasOwnProperty("no")) {
      if (popUpOption.no.isProc) {
        if (popUpOption.no.event)
          $eventBus.emit(popUpOption.no.event, popUpOption.no.param);
        else $eventBus.emit(`${popUpOption.id}_PROC_NO`, popUpOption.no.param);
      }
    }
    if (popUpOption.reload) {
      window.location.reload();
    }
    isOpenPop.value = false;
  }
</script>

<style lang="scss"></style>