第三十八节全局公共方法封装消息提示 二次确认弹窗本节目标封装全局统一消息提示成功 / 失败 / 警告封装二次确认弹窗删除、批量删除时的确认框挂载到全局页面内直接调用不用每次重复写 el-message、el-popconfirm 代码方案单独抽公共 js在 main.js 引入也可以封装成 composable 写法这里用项目常用的composables 方式步骤 1新建src/composables/useMsg.jsimport { ElMessage, ElMessageBox } from element-plus export function useMsg() { // 成功提示 const msgSuccess (message) { ElMessage({ type: success, message, duration: 2000 }) } // 错误提示 const msgError (message) { ElMessage({ type: error, message, duration: 2500 }) } // 警告提示 const msgWarning (message) { ElMessage({ type: warning, message, duration: 2000 }) } /** * 删除二次确认弹窗 * param {string} title 弹窗标题 * param {string} content 提示文字 * returns Promise 点击确定resolve取消reject */ const msgConfirm (title 提示, content 确定执行此操作) { return ElMessageBox.confirm( content, title, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning } ) } return { msgSuccess, msgError, msgWarning, msgConfirm } }步骤 2页面中使用以用户管理 删除单行 / 批量删除举例src/views/system/user/user.vuescript setup import { ref, reactive } from vue // 引入全局消息方法 import { useMsg } from /composables/useMsg const { msgSuccess, msgError, msgConfirm } useMsg() // 删除单行 const handleDelete async (row) { try { await msgConfirm(删除提示, 确定要删除用户【${row.username}】吗) // 调用删除api // await delUserApi(row.id) msgSuccess(删除成功) getList() } catch (err) { // 点取消会进这里不需要处理 console.log(取消删除) } } // 批量删除 const batchDelete async () { if (multipleSelection.value.length 0) { msgWarning(请勾选要删除的数据) return } try { await msgConfirm(批量删除, 确定删除选中${multipleSelection.value.length}条记录) // 调用批量删除api msgSuccess(批量删除成功) getList() } catch (err) {} } /script模板按钮示例el-button typedanger iconDelete clickhandleDelete(row) v-permsystem:user:remove删除/el-button el-button typedanger clickbatchDelete v-permsystem:user:remove批量删除/el-button步骤 3可选全局挂载不想每次 import 也可以main.jsimport { useMsg } from /composables/useMsg const { msgSuccess, msgError, msgWarning, msgConfirm } useMsg() app.config.globalProperties.$msgSuccess msgSuccess app.config.globalProperties.$msgError msgError app.config.globalProperties.$msgWarning msgWarning app.config.globalProperties.$msgConfirm msgConfirm组合式 setup 里推荐直接 import 的方式全局挂载适合选项式旧页面。✅测试清单保存重启pnpm dev进入用户管理页面点击删除按钮 → 弹出确认框点确定执行删除弹出成功提示点取消不执行任何操作批量删除不勾选数据直接点按钮弹出警告提示常用扩展可选loading 封装下一节会讲到全局请求 loading关闭所有消息ElMessage.closeAll() 第三十八节：全局公共方法封装（消息提示 + 二次确认弹窗）
第三十八节全局公共方法封装消息提示 二次确认弹窗本节目标封装全局统一消息提示成功 / 失败 / 警告封装二次确认弹窗删除、批量删除时的确认框挂载到全局页面内直接调用不用每次重复写 el-message、el-popconfirm 代码方案单独抽公共 js在 main.js 引入也可以封装成 composable 写法这里用项目常用的composables 方式步骤 1新建src/composables/useMsg.jsimport { ElMessage, ElMessageBox } from element-plus export function useMsg() { // 成功提示 const msgSuccess (message) { ElMessage({ type: success, message, duration: 2000 }) } // 错误提示 const msgError (message) { ElMessage({ type: error, message, duration: 2500 }) } // 警告提示 const msgWarning (message) { ElMessage({ type: warning, message, duration: 2000 }) } /** * 删除二次确认弹窗 * param {string} title 弹窗标题 * param {string} content 提示文字 * returns Promise 点击确定resolve取消reject */ const msgConfirm (title 提示, content 确定执行此操作) { return ElMessageBox.confirm( content, title, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning } ) } return { msgSuccess, msgError, msgWarning, msgConfirm } }步骤 2页面中使用以用户管理 删除单行 / 批量删除举例src/views/system/user/user.vuescript setup import { ref, reactive } from vue // 引入全局消息方法 import { useMsg } from /composables/useMsg const { msgSuccess, msgError, msgConfirm } useMsg() // 删除单行 const handleDelete async (row) { try { await msgConfirm(删除提示, 确定要删除用户【${row.username}】吗) // 调用删除api // await delUserApi(row.id) msgSuccess(删除成功) getList() } catch (err) { // 点取消会进这里不需要处理 console.log(取消删除) } } // 批量删除 const batchDelete async () { if (multipleSelection.value.length 0) { msgWarning(请勾选要删除的数据) return } try { await msgConfirm(批量删除, 确定删除选中${multipleSelection.value.length}条记录) // 调用批量删除api msgSuccess(批量删除成功) getList() } catch (err) {} } /script模板按钮示例el-button typedanger iconDelete clickhandleDelete(row) v-permsystem:user:remove删除/el-button el-button typedanger clickbatchDelete v-permsystem:user:remove批量删除/el-button步骤 3可选全局挂载不想每次 import 也可以main.jsimport { useMsg } from /composables/useMsg const { msgSuccess, msgError, msgWarning, msgConfirm } useMsg() app.config.globalProperties.$msgSuccess msgSuccess app.config.globalProperties.$msgError msgError app.config.globalProperties.$msgWarning msgWarning app.config.globalProperties.$msgConfirm msgConfirm组合式 setup 里推荐直接 import 的方式全局挂载适合选项式旧页面。✅测试清单保存重启pnpm dev进入用户管理页面点击删除按钮 → 弹出确认框点确定执行删除弹出成功提示点取消不执行任何操作批量删除不勾选数据直接点按钮弹出警告提示常用扩展可选loading 封装下一节会讲到全局请求 loading关闭所有消息ElMessage.closeAll()