MessageBox 确认弹窗

确认弹窗组件，用于确认用户操作。

基础用法

<template>
  <pa-button font="star_arc_line" @click="debouncedClick1">快捷弹窗1</pa-button>

  <pa-button font="star_arc_line" @click="debouncedClick2">快捷弹窗2</pa-button>

  <pa-button font="star_arc_line" @click="debouncedClick3">自定义弹窗</pa-button>
</template>

<script lang="ts" setup>
import { M_MessageBox, M_Message } from "@/package/components/feedback";

function debouncedClick1() {
  M_MessageBox.confirm("是否继续", () => {
    M_Message.success("确认");
  });
}

function debouncedClick2() {
  M_MessageBox.delete({
    onConfirm: () => {
      M_Message.success("确认");
    },
    onClose: () => {
      M_Message.warning("取消");
    }
  });
}

function debouncedClick3() {
  M_MessageBox.confirm({
    title: "自定义弹窗",
    type: "success",
    message: "自定义弹窗是否继续",
    onConfirm: () => {
      M_Message.success("确认");
    },
    onClose: () => {
      M_Message.warning("取消");
    }
  });
}
</script>

<style></style>

显示代码

快捷方法

删除确认（推荐）

import { M_MessageBox } from "@/package/components/feedback";

// 删除确认 - 内置合适的默认值
M_MessageBox.delete({
  message: { "en-US": "Are you sure to delete?", "zh-CN": "确定删除吗？" },
  onConfirm: () => {
    // 执行删除操作
  },
  onClose: () => {
    // 取消删除
  }
});

提示

M_MessageBox.delete() 已内置合适的 title、type、confirmButtonText 默认值，无需手动指定。

普通确认

M_MessageBox.confirm({
  title: { "en-US": "Confirm", "zh-CN": "确认" },
  message: { "en-US": "Are you sure?", "zh-CN": "确定吗？" },
  confirmButtonText: { "en-US": "OK", "zh-CN": "确定" },
  onConfirm: () => {
    // 确认操作
  }
});

MessageBoxOptions

属性名	描述	类型	默认值
title	弹窗标题，支持多语言	Record<"en-US" | "zh-CN", string>	—
message	弹窗消息，支持多语言	Record<"en-US" | "zh-CN", string>	—
isType	是否为确认弹窗，确认按钮为 primary 类型，取消按钮为 default 类型	"confirm" | undefined	false
type	弹窗类型，影响弹窗样式和按钮类型	"default" | "info" | "primary" | "success" | "warning" | "danger"	default
customClass	自定义弹窗类名，用于自定义弹窗样式	string	—
confirmButtonText	确认按钮文本，支持多语言	Record<"en-US" | "zh-CN", string>	—
cancelButtonText	取消按钮文本，支持多语言	Record<"en-US" | "zh-CN", string>	—
confirmButtonIcon	确认按钮图标	string	—
cancelButtonIcon	取消按钮图标	string	—
onConfirm	确认按钮点击回调函数	() => void	—
onClose	取消按钮点击回调函数	() => void	—
dangerouslyUseHTMLString	是否使用 HTML 字符串渲染消息，默认不使用 HTML 字符串	boolean	false
zIndex	弹窗的 z-index 值，默认自增长	number	—

最佳实践

删除操作

// ✅ 推荐：使用 delete() 方法
M_MessageBox.delete({
  message: { "en-US": "Delete this item?", "zh-CN": "删除此项？" },
  onConfirm: () => deleteItem()
});

// ❌ 不推荐：手动指定所有参数
M_MessageBox.confirm({
  title: "删除确认",      // 不需要
  type: "warning",        // 不需要
  confirmButtonText: "删除", // 不需要
  message: "确定删除吗？",
  onConfirm: () => deleteItem()
});

多语言支持

M_MessageBox.delete({
  message: { 
    "en-US": "Are you sure to delete this item?", 
    "zh-CN": "确定删除此项吗？" 
  },
  onConfirm: () => deleteItem()
});