Notification 전역 알림

전역으로 정보를 알려 주는 알림 컴포넌트예요.

출처: 문서

본문

전역 정보 알림 컴포넌트예요.

언제 사용하나요?

사용자에게 전역적으로 안내 메시지를 보여 줘야 할 때 사용하고, 몇 초 뒤 사라져요.

기본 사용법

:::demo 서비스 방식 호출을 추천해요. 기본 상태에서는 메시지 내용과 닫기 버튼만 표시해요.

<template>
  <d-button @click.native="showService()">基本用法</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        content: '通知框消息内容',
      });
    }

    return { showService };
  },
});
</script>

:::

메시지 제목

:::demo title 파라미터로 메시지 제목을 설정해요. 기본값은 비어 있어서 제목이 표시되지 않아요.

<template>
  <d-button @click.native="showService()">消息标题</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
      });
    }

    return { showService };
  },
});
</script>

:::

메시지 유형

:::demo type 파라미터로 메시지 유형을 설정해요. 현재 normal、info、success、warning、danger 다섯 가지 유형을 지원하고, 기본 normal 유형은 유형 아이콘을 표시하지 않아요.

<template>
  <d-button @click.native="showService()">消息类型</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        type: 'success',
      });
    }

    return { showService };
  },
});
</script>

:::

타임아웃 시간

:::demo duration 파라미터로 타임아웃 시간을 설정해요. 단위는 ms이고, 기본 3000 ms 뒤에 자동으로 닫히며, 0으로 설정하면 자동으로 닫히지 않아요.

<template>
  <d-button @click.native="showService()">超时时间</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        duration: 1000,
      });
    }

    return { showService };
  },
});
</script>

:::

닫힘 콜백

:::demo onClose 파라미터로 메시지가 닫힐 때의 콜백을 설정해요.

<template>
  <d-button @click.native="showService()">关闭回调</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        title: '消息标题',
        content: '通知框消息内容',
        onClose: () => {
          console.log('notification closed');
        },
      });
    }

    return { showService };
  },
});
</script>

:::

컴포넌트 방식 호출

:::demo 서비스 방식 외에도 컴포넌트 방식 호출을 제공해요. 컴포넌트 방식의 기본 슬롯은 서비스 방식의 content 파라미터와 같은 역할을 하고, 나머지 파라미터는 서비스 방식과 이름이 같아요.

<template>
  <d-button @click="showComponent">组件方式调用</d-button>
  <d-notification v-model="show" title="标题" type="info">通知提示内容</d-notification>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const show = ref(false);
    const showComponent = () => {
      show.value = true;
    };

    return { show, showComponent };
  },
});
</script>

:::

Service 사용법

// 方式1，局部引入 NotificationService
import { NotificationService } from '@devui/vue-devui/notification';
NotificationService.open({ xxx });

// 方式2，全局属性
this.$notificationService.open({ xxx });

Notification 파라미터

Notification 슬롯

타입 정의

NotificationType

type NotificationType = 'normal' | 'success' | 'error' | 'warning' | 'info';

더 알아보기 (Learn more)

Notification은 화면 구석에 떠서 시스템 성격의 안내를 전달하는 컴포넌트예요. 사용자 조작에 대한 즉각 피드백은 Message를, 시스템 수준의 수동적 알림은 Notification을 쓰는 식으로 역할을 나누면 좋아요.