Notification 알림

오른쪽 위 (설정 가능한 네 모서리)에 표시되는 카드형 알림으로, 프로세스 노드류의 긴 피드백에 적합합니다.

알림

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">정보</LhButton>
      <LhButton type="primary" @click="show('success')">성공</LhButton>
      <LhButton type="warning" @click="show('warning')">경고</LhButton>
      <LhButton type="danger" @click="show('danger')">위험</LhButton>
      <LhButton @click="showClickable">클릭 가능한 카드</LhButton>
      <LhButton @click="closeAll">모두 닫기</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content }); onClick을 전달하면 카드를 클릭할 수 있습니다.</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: type + ' 알림',
        content: '계산행려도 디지털화 프로세스 노드가 업데이트되었습니다.',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: '클릭해 보세요',
        content: 'onClick을 전달하면 카드 전체를 클릭할 수 있습니다.',
        onClick() {
          LhMessage.success('카드가 클릭되었습니다')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

서비스 API

LhNotification.success({ title: '수집 완료', content: '120점이 보관되었습니다' })
// info / success / warning / danger, 두 번째 매개변수는 options
LhNotification.info({ title: '클릭하세요', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

프로퍼티	설명	타입	기본값
type	유형	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	제목	string	—
content	본문	string	—
showClose	닫기 버튼 표시 여부	boolean	false
closeLabel	닫기 버튼의 접근성 이름 (미전달 시 언어 팩 notification.close 사용)	string	—
onClick	전달하면 카드를 클릭할 수 있음	() => void	—
sx	sx 레이아웃 단축 속성	—	—

팁

알림 표시 위치(position: top-right / top-left / bottom-right / bottom-left)는 openNotification의 options에서 설정하며, 기본값은 오른쪽 위입니다.