Toast 알림 만들기

Toast.vue

<template>
  <div
    class="alert toast-box"
    :class="`alert-${type}`"
    role="alert">
    {{ message }}
  </div>
</template>
<script>
export default {
    props: {
        message: {
            type: String,
            required: true
        },
        type: {
            type: String,
            default: 'success'
        }
    }
}
</script>
<style>
.toast-box {
    position: fixed;
    top: 10px;
    right: 10px;
}
</style>

: 부모컴포넌트로부터 message와 type정보를 받아 dom에 출력하는 방식

 

부모컴포넌트

<template>
<Toast v-if="showToast"
 :message="toastMessage"
 :type="toastAlertType"/>
</template>

<script>
components:{Toast},
  setup () {
   onUnmounted(() => {
    //쓸데없는 메모리 누수 방지
    clearTimeout(timeout.value);
   });
   
   const showToast = ref(false);
   const toastAlertType = ref('');
   const timeout = ref(null);
   const toastMessage = ref('');

const triggerToast = (message,type) => {
       toastMessage.value = message;
       toastAlertType.value = type;
       showToast.value = true;
       
       timeout.value = setTimeout(() => {
        toastMessage.value = '';
        toastAlertType.value = '';
        showToast.value = false;
       },3000)
      }
 const onSave = async () => {
       try {
        const res = await axios.put(`http://localhost:3000/todos/${todoId}`, {
         subject: todo.value.subject,
         completed: todo.value.completed
        });
        triggerToast('Successfully saved!','success');
       } catch(err) {
        console.log(err);
        triggerToast('Something went wrong','danger');
       }
      }
      return{
      showToast,toastMessage,toastAlertType
      }
 }
</script>