useMessage

useMessage 返回 $message 全局方法，用法与 ElMessage 完全一致。可以直接调用返回值，也可以使用 success、warning 等快捷方法。

基础用法

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

  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>

Placement

<script setup lang="ts">
  import { useMessage } from 'element-hooks';
  import { type MessagePlacement, type MessageType } from 'element-plus';

  const message = useMessage();

  const placementOptions = {
    top: { count: 0, type: 'success' },
    bottom: { count: 0, type: 'warning' },
    'top-left': { count: 0, type: 'info' },
    'top-right': { count: 0, type: 'primary' },
    'bottom-left': { count: 0, type: 'warning' },
    'bottom-right': { count: 0, type: 'error' },
  } satisfies Record<MessagePlacement, { count: number; type: MessageType }>;

  const openMsg = (placement: MessagePlacement = 'top') => {
    const options = placementOptions[placement];

    options.count += 1;

    message({
      message: `This is a message from the ${placement} ${options.count}`,
      type: options.type,
      placement,
    });
  };
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" :plain="true" @click="openMsg()">Top</el-button>
    <el-button class="!ml-0" :plain="true" @click="openMsg('top-left')">
      Top Left
    </el-button>
    <el-button class="!ml-0" :plain="true" @click="openMsg('top-right')">
      Top Right
    </el-button>
    <el-button class="!ml-0" :plain="true" @click="openMsg('bottom')">
      Bottom
    </el-button>
    <el-button class="!ml-0" :plain="true" @click="openMsg('bottom-left')">
      Bottom Left
    </el-button>
    <el-button class="!ml-0" :plain="true" @click="openMsg('bottom-right')">
      Bottom Right
    </el-button>
  </div>
</template>

API

useMessage 无需参数，直接返回 $message 全局方法。

useMessage() 的返回值可以像 ElMessage 一样直接调用，也可以调用 success、warning、error 等方法。

import { useMessage } from 'element-hooks';

const message = useMessage();

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