Message 消息提示

常用于主动操作后的反馈提示。 与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释。 文末有 options 列表，可以结合 Notification 的文档理解它们。 Element Plus 注册了一个全局的 $message方法用于调用。 Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<script setup>
import { h } from 'vue'
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
const open = () => {
  createMessage({ message: 'hello world' })
}
const open2 = () => {
  createMessage({ message: h('b', 'this is bold') })
}
</script>
<template>
  <div class="basic block">
    <Button type="primary" @click="open"> 创建一条消息 </Button>
    <Button  @click="open2"> 创建支持 VNode 的消息 </Button>
  </div>
</template>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。设置 type 字段可以定义不同的状态，默认为info。

<script setup>
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
const open = (type) => {
  createMessage({ message: 'hello world', type })
}
</script>
<template>
  <div class="basic block">
    <Button @click="open('success')"> Success </Button>
    <Button @click="open('info')"> Info </Button>
    <Button @click="open('warning')"> warning </Button>
    <Button @click="open('danger')"> Danger </Button>
  </div>
</template>

可关闭的消息提示

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 showClose 设置为 true ，Message 拥有可控的 duration， 默认的关闭时间为 3000 毫秒，当把这个属性的值设置为0便表示该消息不会被自动关闭。

<script setup>
import { createMessage } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
const open = () => {
  createMessage({ message: 'hello world', showClose: true, duration: 0 })
}
</script>
<template>
  <div class="basic block">
    <Button @click="open"> 可关闭消息 </Button>
  </div>
</template>

手动关闭所有实例

可以调用 message 模块提供了一个 closeAll() 手动关闭所有实例

<script setup>
import { createMessage, closeAll } from '@/components/Message/method'
import Button from '@/components/Button/Button.vue'
const open = () => {
  createMessage({ message: 'hello world1', duration: 0 })
  createMessage({ message: 'hello world2', duration: 0 })
  createMessage({ message: 'hello world3', duration: 0 })
}
const close = () => {
  closeAll()
}
</script>
<template>
  <div class="basic block">
    <Button @click="open"> 创建三条消息 </Button>
    <Button @click="close"> 全部关闭 </Button>
  </div>
</template>

React 用法

import { createMessage, closeAllMessages } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  return (
    <div>
      <button onClick={() => createMessage({ message: '这是一条消息', type: 'info' })}>
        信息
      </button>
      <button onClick={() => createMessage({ message: '成功!', type: 'success' })}>
        成功
      </button>
      <button onClick={() => createMessage({ message: '警告!', type: 'warning' })}>
        警告
      </button>
      <button onClick={() => createMessage({ message: '错误!', type: 'danger' })}>
        错误
      </button>
    </div>
  )
}

// 可关闭 + 自定义时长
createMessage({ message: '5秒后关闭', duration: 5000, showClose: true })

// 不自动关闭
createMessage({ message: '手动关闭', duration: 0, showClose: true })

// 关闭所有
closeAllMessages()

API

Message 配置项

使用 createMessage 创建消息，它接受一个 Object，以下是 Object 中的属性列表。

属性名	说明	类型	默认值
message	消息文字	string | VNode	—
type	消息类型	'success' | 'warning' | 'info' | 'danger'	info
duration	显示时间（毫秒），设为 0 则不会自动关闭	number	3000
showClose	是否显示关闭按钮	boolean	false
offset	距离窗口顶部的偏移量（像素）	number	20

Message 方法

调用 createMessage 会返回当前 Message 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明	类型
close	关闭当前 Message	() => void

全局方法

方法名	说明	类型
closeAll	关闭所有 Message 实例	() => void