cp*: 알림창(alert)

Alert.vue

<template>
 <Transition name="fade">
  <div v-if="isVisible" class="alert" :class="typeClass">
    <!-- 아이콘이 있는 경우 렌더링 -->
    <i v-if="icon" :class="['icon', icon]"></i>
    <span class="message">{{ message }}</span>
    <!-- 닫기 버튼이 있는 경우 렌더링 -->
    <button v-if="closable" class="close-btn" @click="closeAlert">
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
  </div>
</Transition>
</template>

<script>
export default {
  name: "Alert",
  props: {
    message: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: "info", // 지원되는 타입: "info", "success", "warning", "error"
    },
    closable: {
      type: Boolean,
      default: true, // 닫기 버튼 표시 여부
    },
    icon: {
      type: String,
      default: "", // 알림 왼쪽에 표시할 FontAwesome 등 CSS 클래스 이름
    },
  },
  data() {
    return {
      isVisible: true, // 알림 표시 여부
    };
  },
  computed: {
    typeClass() {
      // 알림 스타일을 타입에 따라 동적으로 변경
      return {
        info: "alert-info",
        success: "alert-success",
        warning: "alert-warning",
        error: "alert-error",
      }[this.type];
    },
  },
  methods: {
    closeAlert() {
      this.isVisible = false; // 알림 숨김 처리
    },
  },
  mounted() {
    if (!this.closable) {
      // closable이 false일 때 3초 후 자동으로 사라짐
      setTimeout(() => {
        this.closeAlert();
      }, 3000);
    }
  },
};
</script>

<style scoped>
.alert {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert-info {
  background-color: #e0f7fa;
  color: #006064;
  border-color: #4dd0e1;
}

.alert-success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-color: #66bb6a;
}

.alert-warning {
  background-color: #fff8e1;
  color: #f9a825;
  border-color: #ffeb3b;
}

.alert-error {
  background-color: #ffebee;
  color: #b71c1c;
  border-color: #e57373;
}

.icon {
  font-size: 1.5rem;
}

.message {
  flex-grow: 1;
}

.close-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

 

App.vue

<template>
  <div>
    <h1>Alert Component</h1>

    <!-- 닫기버튼이 있는 경우 -->
    <Alert message="Information alert!" type="info" icon="fas fa-info-circle" />
    <Alert message="Success alert!" type="success" icon="fas fa-check-circle" />
    <Alert message="Warning alert!" type="warning" icon="fas fa-exclamation-circle" />
    <Alert message="Error alert!" type="error" icon="fas fa-times-circle" />
	<!-- 자동 닫힘  -->
    <Alert message="Auto-closing alert without icon." type="success" :closable="false" />
  </div>
</template>

<script>
import Alert from "./Alert.vue";

export default {
  name: "App",
  components: {
    Alert,
  },
};
</script>

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
</style>>

★ Vue SFC Playground 코드 실행 →

코드 설명

1.  Props

• message: 알림에서 표시할 텍스트 메시지(필수)
• type: 알림 스타일을 지정하는 타입(info, sucess, waring., error)으로 디폴트는 "info"

2. 닫기버튼 없는 옵션일 경우(:closable="false") 따라 3초후 자동으로 사라집니다.

 

3. typeClass에 따라 다른 스타일이 적용 가능합니다.

 

4. 아이콘을 추가할수 있습니다.

 

5. isVisible로 알림의 표시여부(상태 관리)를 제어합니다.