Message 전역 안내

주도적인 조작 후의 피드백 안내에 주로 쓰이는 전역 안내 컴포넌트예요. Notification이 시스템 수준 알림의 수동적 알림에 가깝다는 점이 둘의 차이예요.

출처: 문서

본문

주로 능동적인 조작 이후의 피드백 안내에 사용해요. Notification과의 차이는, Notification이 시스템 수준 알림의 수동적 알림에 더 가깝다는 점이에요.

언제 사용하나요?

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

기본 사용법

Message 스타일은 네 가지가 있어요: normal、success、error、warning、info.

:::demo

<template>
  <div class="demo-spacing">
    <d-button @click="open('normal')">normal</d-button>
    <d-button @click="open('success')">success</d-button>
    <d-button @click="open('error')">error</d-button>
    <d-button @click="open('warning')">warning</d-button>
    <d-button @click="open('info')">info</d-button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function open(type) {
      this.$message({
        type,
        message: 'this is a message.',
      });
    }

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

:::

닫기 버튼이 있는 메시지

기본 Message는 사용자가 직접 닫을 수 없어요. 수동으로 닫는 기능이 필요하다면 showClose를 true로 설정하세요. 또한 기본 닫힘 시간은 3000밀리초인데, 이 속성(duration) 값을 0으로 설정하면 메시지가 자동으로 닫히지 않아요.

:::demo

<template>
  <div class="demo-spacing">
    <d-button @click="closeIcon()">show close icon</d-button>
    <d-button @click="notClose()">not close</d-button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function closeIcon() {
      this.$message({
        type: 'success',
        message: 'Show close button.',
        showClose: true,
      });
    }

    function notClose() {
      this.$message({
        type: 'info',
        message: 'Do not automatically close messages.',
        showClose: true,
        duration: 0,
      });
    }

    return { closeIcon, notClose };
  },
});
</script>

:::

타임아웃 시간

duration으로 message가 표시되는 시간을 밀리초 단위로 정해요(1000밀리초 => 1초). 이 값을 0으로 설정하면 자동으로 닫히지 않아요.

:::demo

<template>
  <div class="demo-spacing">
    <d-button @click="open()">show message 5000ms</d-button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function open() {
      this.$message({
        type: 'success',
        message: 'show message 5000ms.',
        duration: 5000,
        showClose: true,
      });
    }

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

:::

그림자와 테두리 설정

bordered를 false로 설정하면 message의 테두리를 끌 수 있어요.

shadow를 false로 설정하면 message의 그림자를 끌 수 있어요.

:::demo

<template>
  <div class="demo-spacing">
    <d-button @click="closeBordered()">close bordered</d-button>
    <d-button @click="closeShadow()">close shadow</d-button>
    <d-button @click="closeBAndS()">close bordered And shadow</d-button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function closeBordered() {
      this.$message({
        type: 'success',
        message: 'close bordered.',
        bordered: false,
      });
    }

    function closeShadow() {
      this.$message({
        type: 'info',
        message: 'close shadow.',
        shadow: false,
      });
    }

    function closeBAndS() {
      this.$message({
        type: 'error',
        message: 'close shadow.',
        bordered: false,
        shadow: false,
      });
    }

    return { closeBordered, closeShadow, closeBAndS };
  },
});
</script>

:::

닫힘 콜백

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

<template>
  <div class="demo-spacing">
    <d-button @click="closeMessage()">close message</d-button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function closeMessage() {
      this.$message({
        type: 'success',
        message: 'close message.',
        onClose: () => {
          console.log('message closed');
        },
      });
    }

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

:::

다양한 사용 방법

message 메시지를 호출할 때는 여러 가지 호출 방법과 사용 방식이 있어요.

호출 방식

// 第一种 全局调用
this.$message('I call message globally');

// 第二种 引入局部调用
import { Message } from 'vue-devui';
message('I call message locally');

사용 방식

import { Message } from 'vue-devui';

// 传入字符串直接使用默认参数
message('I am a default message');

// 传入对象设置参数
message({
  message: 'I am message',
  type: 'info',
  bordered: false,
});

// 直接选择类型调用
message.error('I am a error message');
message.error({
  message: 'I am a error message',
  bordered: false,
  shadow: false,
});

Message 파라미터

Message 타입 정의

MessageType

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

더 알아보기 (Learn more)

Message는 전역 함수 형태로 가볍게 띄웠다가 사라지는 안내창이에요. duration: 0과 showClose를 조합하면 사용자가 직접 닫을 때까지 유지되는 메시지도 만들 수 있어요.