普通用法

<template>  
<el-button :plain="true" @click="open">Show message</el-button> 
 <el-button :plain="true" @click="openVn">VNode</el-button></template>
 <script lang="ts" setup>import { h } from 'vue'import { ElMessage } 
 from 'element-plus'const open = () => 
 {  ElMessage('This is a message.')}

<template>
  <el-button :plain="true" @click="open2">Success</el-button>
  <el-button :plain="true" @click="open3">Warning</el-button>
  <el-button :plain="true" @click="open1">Message</el-button>
  <el-button :plain="true" @click="open4">Error</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage('This is a 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.')
}
</script>

相对比上面，背景更白了。

<template>
  <el-button :plain="true" @click="open1">Success</el-button>
  <el-button :plain="true" @click="open2">Warning</el-button>
  <el-button :plain="true" @click="open3">Message</el-button>
  <el-button :plain="true" @click="open4">Error</el-button>
</template>

<script setup>
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 message.',
    type: 'info',
    plain: true,
  })
}
const open4 = () => {
  ElMessage({
    message: 'Oops, this is a error message.',
    type: 'error',
    plain: true,
  })
}
</script>

可关闭的消息提示

<template>
  <el-button :plain="true" @click="open1">Message</el-button>
  <el-button :plain="true" @click="open2">Success</el-button>
  <el-button :plain="true" @click="open3">Warning</el-button>
  <el-button :plain="true" @click="open4">Error</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const open1 = () => {
  ElMessage({
    showClose: true,
    message: 'This is a 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',
  })
}
</script>

<template>
  <el-button plain @click="openCenter">Centered text</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const openCenter = () => {
  ElMessage({
    showClose: true,
    message: 'Centered text',
    center: true,
  })
}
</script>

<template>
  <el-button :plain="true" @click="openHTML">Use HTML string</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const openHTML = () => {
  ElMessage({
    dangerouslyUseHTMLString: true,
    message: '<strong>This is <i>HTML</i> string</strong>',
  })
}
</script>

分组消息合并

<template>
  <el-button :plain="true" @click="open">Show message</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const open = () => {
  ElMessage({
    message: 'This is a message.',
    grouping: true,
    type: 'success',
  })
}
</script>