useMessageBox

useMessageBox 用于封装 ElMessageBox 的命令式调用，适用于消息提示、确认消息与提交内容等场景。

它的设计目标并非替代 ElMessageBox，而是在常见业务流中提供更直接的结果处理方式：对 confirm 与 prompt 的取消/关闭场景进行统一封装，便于直接使用 await 编排流程。

消息提示

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

  import type { Action } from 'element-plus';

  const messageBox = useMessageBox();

  const open = () => {
    messageBox.alert('This is a message', 'Title', {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: 'OK',
      callback: (action: Action) => {
        ElMessage({
          type: 'info',
          message: `action: ${action}`,
        });
      },
    });
  };
</script>

<template>
  <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

确认消息

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

  const messageBox = useMessageBox();

  const open = async () => {
    const isConfirmed = await messageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    }
  };
</script>

<template>
  <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

提交内容

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

  const messageBox = useMessageBox();

  const open = async () => {
    const value = await messageBox.prompt('Please input your e-mail', 'Tip', {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      inputPattern:
        /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
      inputErrorMessage: 'Invalid Email',
    });

    if (value !== null) {
      ElMessage({
        type: 'success',
        message: `Your email is:${value}`,
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Input canceled',
      });
    }
  };
</script>

<template>
  <el-button plain @click="open">Click to open Message Box</el-button>
</template>

使用 HTML 片段

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

  const messageBox = useMessageBox();

  const open = () => {
    messageBox.alert(
      '<strong>proxy is <i>HTML</i> string</strong>',
      'HTML String',
      {
        dangerouslyUseHTMLString: true,
      },
    );
  };
</script>

<template>
  <el-button plain @click="open">Click to open Message Box</el-button>
</template>

内容居中

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

  const messageBox = useMessageBox();

  const open = async () => {
    const isConfirmed = await messageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        center: true,
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    }
  };
</script>

<template>
  <el-button plain @click="open">Click to open Message Box</el-button>
</template>

自定义图标

<script setup lang="ts">
  import { markRaw } from 'vue';
  import { ElMessage } from 'element-plus';
  import { Delete } from '@element-plus/icons-vue';
  import { useMessageBox } from 'element-hooks';

  const messageBox = useMessageBox();

  const open = async () => {
    const isConfirmed = await messageBox.confirm(
      'It will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        icon: markRaw(Delete),
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    }
  };
</script>

<template>
  <el-button plain @click="open">Click to open Message Box</el-button>
</template>

可拖放

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

  const messageBox = useMessageBox();

  const open = async () => {
    const isConfirmed = await messageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        draggable: true,
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    }
  };

  const open2 = async () => {
    const isConfirmed = await messageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
        draggable: true,
        overflow: true,
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      });
    }
  };

  const open3 = async () => {
    const isConfirmed = await messageBox.confirm(
      'This message box has custom dragging styles. Try dragging it to see the effects!',
      'Custom Dragging Style',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'info',
        draggable: true,
        customClass: 'custom-dragging-message-box',
      },
    );

    if (isConfirmed) {
      ElMessage({
        type: 'success',
        message: 'Action completed',
      });
    } else {
      ElMessage({
        type: 'info',
        message: 'Action canceled',
      });
    }
  };
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" plain @click="open">
      Open a draggable Message Box
    </el-button>
    <el-button class="!ml-0" plain @click="open2">
      Open a overflow draggable Message Box
    </el-button>
    <el-button class="!ml-0" plain @click="open3">
      Open a custom dragging style Message Box
    </el-button>
  </div>
</template>

<style>
  .custom-dragging-message-box.is-dragging {
    border: 2px dashed var(--el-color-primary);
    opacity: 0.65;
  }
</style>

API

useMessageBox

与 ElMessageBox 的函数调用方式一致，返回包含 alert、confirm 与 prompt 的方法对象。

• alert：与 ElMessageBox.alert 行为一致，不做额外封装。
• confirm：返回 Promise<boolean>，确认返回 true，取消/关闭返回 false。
• prompt：返回 Promise<string | null>，确认返回输入值，取消/关闭返回 null。

返回值方法

方法名	描述	类型签名
alert	简单的提示框	ElMessageBoxShortcutMethod
confirm	确认消息框，统一封装取消/关闭分支，不再抛出异常	(...args: MessageBoxMethodParams) => Promise<boolean>
prompt	提交内容框，统一封装取消/关闭分支，不再抛出异常	`(...args: MessageBoxMethodParams) => Promise<string