useMessage

useMessage 对 ElMessage 进行了轻量封装，适用于主动操作后的即时反馈场景。

它保持与 ElMessage 一致的调用方式，支持函数直接调用与 success、warning、info、error、primary 等快捷方法，可无缝迁移现有代码。

基础用法

<script setup lang="ts">
  import { h } from 'vue';
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

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

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" :plain="true" @click="open">
      Show message
    </el-button>
    <el-button class="!ml-0" :plain="true" @click="openVn">VNode</el-button>
  </div>
</template>

不同状态

<script setup lang="ts">
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" :plain="true" @click="open5">Primary</el-button>
    <el-button class="!ml-0" :plain="true" @click="open2">Success</el-button>
    <el-button class="!ml-0" :plain="true" @click="open3">Warning</el-button>
    <el-button class="!ml-0" :plain="true" @click="open1">Info</el-button>
    <el-button class="!ml-0" :plain="true" @click="open4">Error</el-button>
  </div>
</template>

Plain

<script setup lang="ts">
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" :plain="true" @click="open5">Primary</el-button>
    <el-button class="!ml-0" :plain="true" @click="open1">Success</el-button>
    <el-button class="!ml-0" :plain="true" @click="open2">Warning</el-button>
    <el-button class="!ml-0" :plain="true" @click="open3">Info</el-button>
    <el-button class="!ml-0" :plain="true" @click="open4">Error</el-button>
  </div>
</template>

可关闭的消息提示

<script setup lang="ts">
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" :plain="true" @click="open6">Primary</el-button>
    <el-button class="!ml-0" :plain="true" @click="open2">Success</el-button>
    <el-button class="!ml-0" :plain="true" @click="open3">Warning</el-button>
    <el-button class="!ml-0" :plain="true" @click="open1">Info</el-button>
    <el-button class="!ml-0" :plain="true" @click="open4">Error</el-button>
    <el-button class="!ml-0" :plain="true" @click="open5">
      Won't close automatically
    </el-button>
  </div>
</template>

使用 HTML 片段作为正文内容

<script setup lang="ts">
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

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

分组消息合并

<script setup lang="ts">
  import { useMessage } from 'element-hooks';

  const message = useMessage();

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

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

API

useMessage

useMessage 无需参数，直接返回 ElMessage 实例函数。

你可以直接调用完整的 ElMessage 方法集，包括函数调用形式与各类状态快捷方法。

import { useMessage } from 'element-hooks'

const message = useMessage()

// 等同于直接调用 ElMessage.success
message.success('Ciallo～(∠·ω< )⌒★')