Message

Message (메시지)

활동 후 피드백을 보여줄 때 사용하는 컴포넌트예요. Notification과의 차이는, Notification은 주로 시스템 레벨의 수동 알림에 쓰인다는 점이에요.

출처: 문서

본문

기본 사용법 (Basic usage)

기본적으로 상단에 표시되고 3초 후 사라져요. placement 속성으로 위치를 제어할 수 있어요. Message의 구성은 notification과 매우 비슷해서 일부 옵션은 여기서 자세히 설명하지 않아요. 아래 옵션 표를 notification 문서와 함께 보면서 이해하면 돼요. Element Plus는 호출을 위한 $message 메서드를 등록했어요. Message는 문자열이나 VNode를 매개변수로 받을 수 있고, 그 값이 본문으로 표시돼요.

import { h } from 'vue'
import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage('This is a message.')
}

const openVn = () => {
  ElMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
  })
}

타입 (Types)

Primary, Success, Warning, Info, Error 활동의 피드백을 보여줘요. 더 많은 커스터마이징이 필요할 때 Message 컴포넌트는 객체를 매개변수로 받을 수도 있어요. 예를 들어 type 값을 설정하면 다른 타입을 정의할 수 있고, 기본값은 info예요. 이 경우 본문은 message 값으로 전달돼요. 또한 타입별 메서드가 등록되어 있어서 open4처럼 type을 넘기지 않고 바로 호출할 수 있어요. primary는 2.9.11에서 추가되었어요.

import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage('This is a info message.')
}
const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  ElMessage.error('Oops, this is a error message.')
}
const open5 = () => {
  ElMessage.primary('This is a primary message.')
}

Plain 2.6.3

plain을 설정하면 평범한 배경을 사용해요.

import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success',
    plain: true,
  })
}
const open2 = () => {
  ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
    plain: true,
  })
}
const open3 = () => {
  ElMessage({
    message: 'This is a info message.',
    type: 'info',
    plain: true,
  })
}
const open4 = () => {
  ElMessage({
    message: 'Oops, this is a error message.',
    type: 'error',
    plain: true,
  })
}
const open5 = () => {
  ElMessage({
    message: 'This is a primary message.',
    type: 'primary',
    plain: true,
  })
}

닫기 가능 (Closable)

닫기 버튼을 추가할 수 있어요. 기본 Message는 수동으로 닫을 수 없어요. 닫을 수 있는 메시지가 필요하다면 showClose 필드를 설정하면 돼요. notification과 마찬가지로 message는 제어 가능한 duration을 가져요. 기본 duration은 3000ms이고, 0으로 설정하면 자동으로 사라지지 않아요.

import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage({
    showClose: true,
    message: 'This is a info message.',
  })
}
const open2 = () => {
  ElMessage({
    showClose: true,
    message: 'Congrats, this is a success message.',
    type: 'success',
  })
}
const open3 = () => {
  ElMessage({
    showClose: true,
    message: 'Warning, this is a warning message.',
    type: 'warning',
  })
}
const open4 = () => {
  ElMessage({
    showClose: true,
    message: 'Oops, this is a error message.',
    type: 'error',
  })
}
const open5 = () => {
  ElMessage({
    showClose: true,
    message: 'Oops, this is a message that does not automatically close.',
    duration: 0,
  })
}
const open6 = () => {
  ElMessage({
    showClose: true,
    message: 'This is a primary message.',
    type: 'primary',
  })
}

HTML 문자열 사용 (Use HTML string)

message는 HTML 문자열을 지원해요. dangerouslyUseHTMLString을 true로 설정하면 message를 HTML 문자열로 취급해요.

WARNING message 속성이 HTML 문자열을 지원하기는 하지만, 웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 XSS 공격을 유발하기 쉬워 매우 위험해요. dangerouslyUseHTMLString이 켜져 있을 때는 message 내용이 신뢰할 수 있는지 확인하고, message에 사용자 제공 내용을 절대 할당하지 마세요.

그룹화 (Grouping)

같은 내용의 메시지를 합쳐요. grouping을 true로 설정하면 같은 내용의 message가 병합돼요.

위치 배치 (Placement) 2.11.0

메시지가 나타나는 위치를 제어해요. 메시지는 뷰포트의 상단(기본값)이나 다른 위치에 표시할 수 있어요.

import { ElMessage } from 'element-plus'

import type { MessagePlacement, MessageType } from 'element-plus'

let topCount = 0
let bottomCount = 0
let topLeftCount = 0
let topRightCount = 0
let bottomLeftCount = 0
let bottomRightCount = 0

const openMsg = (placement: MessagePlacement = 'top') => {
  let count = 0
  let type: MessageType = 'success'

  switch (placement) {
    case 'top':
      count = ++topCount
      type = 'success'
      break
    case 'bottom':
      count = ++bottomCount
      type = 'warning'
      break
    case 'top-left':
      count = ++topLeftCount
      type = 'info'
      break
    case 'top-right':
      count = ++topRightCount
      type = 'primary'
      break
    case 'bottom-left':
      count = ++bottomLeftCount
      type = 'warning'
      break
    case 'bottom-right':
      count = ++bottomRightCount
      type = 'error'
      break
  }

  ElMessage({
    message: `This is a message from the ${placement} ${count}`,
    type,
    placement,
  })
}

전역 메서드 (Global method)

Element Plus는 app.config.globalProperties에 전역 메서드 $message를 추가했어요. 그래서 vue 인스턴스에서 이 페이지에서 했던 것처럼 Message를 호출할 수 있어요.

로컬 임포트 (Local import)

import { ElMessage } from 'element-plus'

이 경우 ElMessage(options)로 호출해야 해요. 타입별 메서드도 등록되어 있어서 예를 들어 ElMessage.success(options)처럼 사용할 수 있어요. ElMessage.closeAll()을 호출해 모든 인스턴스를 수동으로 닫을 수도 있어요.

앱 컨텍스트 상속 (App context inheritance) 2.0.3

이제 message 생성자의 두 번째 매개변수로 컨텍스트를 받아 현재 앱의 컨텍스트를 주입하고 앱의 모든 속성을 상속할 수 있어요. 이렇게 사용할 수 있어요:

TIP ElMessage 컴포넌트를 전역 등록했다면 앱 컨텍스트를 자동으로 상속받아요.

import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)

API

Options

Methods

Message와 this.$message는 현재 Message 인스턴스를 반환해요. 인스턴스를 수동으로 닫으려면 close를 호출하면 돼요.

더 알아보기 (Learn more)

• Loading 컴포넌트 — 로딩
• Message Box 컴포넌트 — 메시지 박스
• Notification 컴포넌트 — 전역 알림
• Element Plus 시작하기 — 프로젝트 설정