Vue.js 中使用 Element Plus 的 Message 和 MessageBox 实现自定义错误消息提示

这是保存的方法，let result = compareJSON(formInline, originalData);\n\t\t\tconsole.log(result);\n\t\t\tif (result) {\n\t\t\t\tuseMessage().error('未作改动');\n\t\t\t\treturn false;\n\t\t\t}\n这个部分如何处理能让他进入到catch 并且给catch传递一个自定义的消息，让他在页面上显示出来？import { ElMessage, ElMessageBox } from 'element-plus';\nimport { i18n } from '../i18n';\n\nconst { t } = i18n.global;\n\ninterface MessageImplements {\n\tinfo(title: string): void;\n\twraning(title: string): void;\n\tsuccess(title: string): void;\n\terror(title: string): void;\n}\n\nexport function useMessage() {\n\tclass MessageClass implements MessageImplements {\n\t\t// 普通提示\n\t\tinfo(title: string): void {\n\t\t\tElMessage.info(title);\n\t\t}\n\n\t\t// 警告提示\n\t\twraning(title: string): void {\n\t\t\tElMessage.warning(title);\n\t\t}\n\n\t\t// 成功提示\n\t\tsuccess(title: string): void {\n\t\t\tElMessage.success(title);\n\t\t}\n\n\t\t// 错误提示\n\t\terror(title: string): void {\n\t\t\tElMessage.error(title);\n\t\t}\n\t}\n\n\treturn new MessageClass();\n}\n\nexport function useMessageBox() {\n\tclass MessageBoxClass implements MessageImplements {\n\t\t// 普通提示\n\t\tinfo(msg: string): void {\n\t\t\tElMessageBox.alert(msg, t('message.box.title'));\n\t\t}\n\n\t\t// 警告提示\n\t\twraning(msg: string): void {\n\t\t\tElMessageBox.alert(msg, t('message.box.title'), { type: 'warning' });\n\t\t}\n\n\t\t// 成功提示\n\t\tsuccess(msg: string): void {\n\t\t\tElMessageBox.alert(msg, t('message.box.title'), { type: 'success' });\n\t\t}\n\n\t\t// 错误提示\n\t\terror(msg: string): void {\n\t\t\tElMessageBox.alert(msg, t('message.box.title'), { type: 'error' });\n\t\t}\n\n\t\t// 确认窗体\n\t\tconfirm(msg: string) {\n\t\t\treturn ElMessageBox.confirm(msg, t('message.box.title'), {\n\t\t\t\tconfirmButtonText: t('common.confirmButtonText'),\n\t\t\t\tcancelButtonText: t('common.cancelButtonText'),\n\t\t\t\ttype: 'warning',\n\t\t\t});\n\t\t}\n\t\t// 提交内容\n\t\tprompt(msg: string) {\n\t\t\treturn ElMessageBox.prompt(msg, t('message.box.title'), {\n\t\t\t\tconfirmButtonText: t('common.confirmButtonText'),\n\t\t\t\tcancelButtonText: t('common.cancelButtonText'),\n\t\t\t\ttype: 'warning',\n\t\t\t});\n\t\t}\n\t}\n\n\treturn new MessageBoxClass();\n}\n这是useMessage里定义的内容内容：在保存方法中，如果需要在catch中捕获错误并传递自定义消息，可以在catch中抛出一个新的错误，并在throw语句中传递自定义消息。然后在调用保存方法的地方使用try-catch语句来捕获这个错误，并处理错误消息。\n\njavascript\nconst onSave = async () => {\n\ttry {\n\t\t// 保存逻辑\n\t} catch (err: any) {\n\t\tloading.value = false;\n\t\tthrow new Error('自定义错误消息'); // 抛出新的错误并传递自定义消息\n\t} finally {\n\t\tloading.value = false;\n\t}\n};\n\n// 调用保存方法的地方\ntry {\n\tawait onSave();\n} catch (err) {\n\tuseMessage().error(err.message); // 显示错误消息\n}\n\n\n这样，在保存方法中的catch块中抛出的错误会被try-catch语句捕获，并且可以通过err.message获取到自定义的错误消息，然后使用useMessage().error()方法显示在页面上。