useMessageBox

原生 ElMessageBox.confirm 和 ElMessageBox.prompt 在取消或关闭时会 reject 并抛出异常，通常需要额外编写 catch 逻辑。useMessageBox 已统一处理这两种情况，因此可以直接使用 await 进行管理。其他异常仍会向调用方抛出。

• confirm — 确认时返回 true，取消或关闭时返回 false。
• prompt — 确认时返回输入内容，取消或关闭时返回 null。

消息提示

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

  const { alert } = useMessageBox();

  const open = () => {
    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 { useMessageBox } from 'element-hooks';
  import { ElMessage } from 'element-plus';

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await 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 { useMessageBox } from 'element-hooks';
  import { ElMessage } from 'element-plus';

  const { prompt } = useMessageBox();

  const open = async () => {
    const value = await 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>

使用 VNode

<script setup lang="ts">
  import { useMessageBox } from 'element-hooks';
  import { ElSwitch } from 'element-plus';
  import { h, ref } from 'vue';

  const { alert } = useMessageBox();

  const open = () => {
    alert(
      h('p', null, [
        h('span', null, 'Message can be '),
        h('i', { style: 'color: teal' }, 'VNode'),
      ]),
      'Message',
    );
  };

  const open1 = () => {
    const checked = ref<boolean | string | number>(false);
    alert(
      () =>
        h(ElSwitch, {
          modelValue: checked.value,
          'onUpdate:modelValue': (val: boolean | string | number) => {
            checked.value = val;
          },
        }),
      'Message',
    );
  };
</script>

<template>
  <div class="flex flex-wrap gap-1">
    <el-button class="!ml-0" plain @click="open">Common VNode</el-button>
    <el-button class="!ml-0" plain @click="open1">Dynamic props</el-button>
  </div>
</template>

使用带有事件处理函数的 VNode

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

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await confirm(
      ({ confirm, cancel, close }) =>
        h('div', [
          h(
            'p',
            { style: 'margin-bottom: 8px' },
            'Custom buttons with MessageBox action handlers',
          ),
          h(
            ElButton,
            {
              type: 'primary',
              onClick: () => {
                confirm();
              },
            },
            () => 'Resolve',
          ),
          h(
            ElButton,
            {
              type: 'danger',
              onClick: () => {
                cancel();
              },
            },
            () => 'Reject',
          ),
          h(
            ElButton,
            {
              onClick: () => {
                close();
              },
            },
            () => 'Close',
          ),
        ]),
      {
        title: 'Message',
        showConfirmButton: false,
        showCancelButton: false,
        distinguishCancelAndClose: true,
      },
    );

    ElMessage({
      type: isConfirmed ? 'success' : 'error',
      message: isConfirmed ? 'resolved: confirm' : 'rejected: cancel or close',
    });
  };
</script>

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

个性化

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

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await confirm(
      h('p', null, [
        h('span', null, 'Message can be '),
        h('i', { style: 'color: teal' }, 'VNode'),
      ]),
      'Message',
      {
        showCancelButton: true,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = 'Loading...';
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      },
    );

    ElMessage({
      type: 'info',
      message: `action: ${isConfirmed ? 'confirm' : 'cancel'}`,
    });
  };
</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 { alert } = useMessageBox();

  const open = () => {
    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 { useMessageBox } from 'element-hooks';
  import { ElMessage } from 'element-plus';

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await 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 { Delete } from '@element-plus/icons-vue';
  import { useMessageBox } from 'element-hooks';
  import { ElMessage } from 'element-plus';
  import { markRaw } from 'vue';

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await 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 { useMessageBox } from 'element-hooks';
  import { ElMessage } from 'element-plus';

  const { confirm } = useMessageBox();

  const open = async () => {
    const isConfirmed = await 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 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 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

• alert — 与 ElMessageBox.alert 行为一致。
• confirm — 调用参数与 ElMessageBox.confirm 一致，但不支持 callback。确认时返回 true，否则返回 false。
• prompt — 调用参数与 ElMessageBox.prompt 一致，但不支持 callback。确认时返回输入值，否则返回 null。

返回值方法

方法名	描述	类型签名
alert	简单的提示框	ElMessageBoxShortcutMethod
confirm	确认消息框，取消或关闭时返回 false	(...args: MessageBoxMethodParams) => Promise<boolean>
prompt	提交内容框，取消或关闭时返回 null	(...args: MessageBoxMethodParams) => Promise<string | null>