Mitt+Vue3으로 이벤트로 구동되는 Flash 메시지 구성 요소 만들기

Mitt+Vue로 Flash 메시지의 구성 요소를 만들 기회가 있으므로 메모로 정리합니다.

만든 물건

Mitt와 Vue를 사용하여 다음과 같은 CodeSandbox 같은 구성 요소를 만들었습니다.
https://codesandbox.io/s/flash-message-sample-on-vue-with-mitt-n4cwq?from-embed
이 Flash 메시지에는 다음과 같은 특징이 있습니다.

- 起動後、一定時間後に自動的に非表示となる
- どの階層のコンポーネントからも手軽に呼べる

나는 표 완성 정보, 기타 통지 등에 통용될 수 있다고 생각한다.

실장 요점

자세한 코드는 CodeSandbox를 보려면 요약점만 보십시오.

Mitt의 pub/sub 제어를 통해 시작

Flash 메시지의 구성 요소는 구성 요소에 의존하지 않으며 어디서든 불러낼 수 있습니다.
이 목표를 실현하기 위해 가벼운 이벤트 관리 라이브러리Mitt를 사용했다.
사실 이 이벤트 구동의 실현은 Vue 2 계열 이전에 Mitt를 사용하지 않아도 되고, Vue의 이벤트 Bus로 실현할 수 있다.
하지만 이벤트버스는 Vue3에서 폐지됐다.Vue의 공식 문서에서도 이벤트버스 대신 Mitt 또는 tiny-emitter를 추천합니다.
https://v3.vuejs.org/guide/migration/events-api.html#overview
Sample 애플리케이션의 구성 요소 요약은 다음과 같습니다.

Flash 메시지를 실행하는 Butons 구성 요소와 FlashMessage 구성 요소는 직접적인 친자 관계가 없습니다.따라서 일반 구성 요소의 부자 관계에 사용되는emit를 사용할 수 없으며mitt의 이벤트의pub/sub로 디스플레이를 관리할 수 없습니다.
Flash 메시지 구성 요소 측에서 onMounted의 시간에 이벤트의 구독 (publish) 을 설정합니다.FLASH_EVENT 출시 후 showMessage를 실행하여 Flash 메시지를 표시합니다.
FlashMessage.vue

onMounted(() => {
  emitter.on<FlashPayload>(FLASH_EVENT, e => {
    if (!e) {
      return;
    }
    showMessage(e);
  });
});

그런 다음 Butttons 어셈블리 측면에서 버튼을 눌러 Event 릴리즈를 실행합니다(emit).
다음은 success 컬러 버튼을 눌렀을 때의 예입니다. onSuccess가 실행되었고 이벤트 발행 중입니다.
Flash 메시지로 표시되는 메시지의 내용과 표시 색상을 Event의 매개 변수로 설정합니다.
Buttons.vue

const onSuccess = () => {
  emitter.emit<FlashPayload>(FLASH_EVENT, {
    message: "success message",
    color: "success"
  });
};

mitt의 설정 자체는 매우 간단하다.
emitter.ts로mitt를 만드는 실례일 뿐입니다. export에서 하고 있습니다.
emitter.ts

import mitt from "mitt";

export type FlashPayload = { color: string, message: string }
export const FLASH_EVENT = Symbol("flashMessage")

export const emitter = mitt();

시작 후 일정 시간 후 Flash 메시지 숨기기

일반적으로 Flash 메시지는 정보가 표시된 후 일정 시간 후에 자동으로 숨겨집니다.
이 목표를 실현하기 위해 이벤트의 구독부터 showMessage를 실행할 때 디스플레이와 동시에 실행setDelayedHide()하고 setTimeout()3000ms 뒤에 숨깁니다.
유지timeoutId 및 실행clearTimeout은 이벤트를 연속으로 발표할 때 이전 이벤트에 설정된 타이머를 버리기 위한 것입니다.
FlashMessage.vue

setup() {
  const display = ref(false);
  const message = ref("");
  const color = ref("");
  const timeoutId = ref<number | null>(null);

  const hideMessage = () => {
    display.value = false;
  };

  const setDelayedHide = () => {
    if (timeoutId.value) {
      clearTimeout(timeoutId.value);
    }
    timeoutId.value = setTimeout(hideMessage, 3000);
  };

  const showMessage = (payload: FlashPayload) => {
    message.value = payload.message;
    color.value = payload.color;
    display.value = true;

    setDelayedHide();
  };

  //...
}

아래에서 팝업된 애니메이션

아래에서 나오는 애니메이션은 Vue의 transtion을 이용하여 이루어진다.

transition은 v-if, v-show 등 디스플레이를 제어하는 구성 요소가 <transition>에 둘러싸여 숨겨진 디스플레이를 실행할 때 임의의class 기능을 추가할 수 있습니다.
이번에는 popupname의transition을 바탕으로 Flash 정보를 중심으로 css로 팝업 스타일을 구현했습니다.
트레이닝을 열심히 하는 것은 처음이지만 비교적 편안한 애니메이션이 만들어진 것 같다.
FlashMessage.vue

<template>
  <transition name="popup">
    <div
      class="notification _flash-message has-text-weight-bold"
      :class="`is-${color}`"
      v-show="display"
    >
      <button class="delete" @click="hideMessage"></button>
      {{ message }}
    </div>
  </transition>
</template>

<script lang="ts">
// ...
</script>

<style scoped>
// ...

.popup-leave-active {
  bottom: 30px;
  opacity: 1;
}
.popup-leave-to {
  bottom: -30px;
  opacity: 0;
}

.popup-enter-active {
  bottom: -30px;
  opacity: 0;
}
.popup-enter-to {
  bottom: 30px;
  opacity: 1;
}
</style>

끝맺다

이상은 "Mitt+Vue로 이벤트로 구동되는 Flash 메시지를 만드는 구성 요소"입니다.
이번 Flash 메시지처럼 친자 관계가 없는 구성 요소 사이를 제어하여 이벤트를 구동하는 것이 매우 편리하다.
글로벌 스토어를 사용해도 표시 제어가 가능하지만, 포옹스토어도 너무 많이 했나요?이럴 때 편해.
만약 코드에 무슨 오류가 있거나'이렇게 하면 더 쉽다'는 말이 있다면, 나에게 가볍게 메시지를 남길 수 있다면 나는 매우 기쁠 것이다.