Message组件

与Alert组件类似，Message组件也用于向用户提供关键的信息，但通常它是以非阻塞的方式显示，显示临时性的通知，比如操作成功，操作失败，通常会在屏幕的某个角落或顶部浮动，不会打断用户的操作。

基础用法

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

<script setup>
import ElButton from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/method'
const open = (type) => {
  createMessage({ message: 'message消息提示', type })
}
</script>
<template>
  <el-button @click="open('success')" type="success"> Success </el-button>
  <el-button @click="open('info')" type="info"> Info </el-button>
  <el-button @click="open('warning')" type="warning"> warning </el-button>
  <el-button @click="open('error')" type="danger"> Danger </el-button>
</template>

可关闭的消息提示

可以添加关闭按钮。

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

<script setup>
import ElButton from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/method'
const open = (type) => {
  createMessage({ 
    message: 'message消息提示',
    showClose: true,
    duration: 0
  })
}
</script>
<template>
  <el-button @click="open('info')" type="info"> Info </el-button>
</template>

手动关闭所有实例

调用closeAll()关闭所有创建的message消息。

<script setup>
import ElButton from '@/components/Button/Button.vue'
import { createMessage, closeAll } from '@/components/Message/method'
const open = (type) => {
  createMessage({ 
    message: 'message消息提示1',
    duration: 0
  })
  createMessage({ 
    message: 'message消息提示2',
    duration: 0
  })
  createMessage({ 
    message: 'message消息提示3',
    duration: 0
  })
  createMessage({ 
    message: 'message消息提示4',
    duration: 0
  })
  createMessage({ 
    message: 'message消息提示5',
    duration: 0
  })
}
const closeAllMessage = () => {
  closeAll()
}
</script>
<template>
  <el-button @click="open('info')" type="info"> 创建多条消息 </el-button>
  <el-button @click="closeAllMessage">关闭所有消息</el-button>
</template>