可以诸如此类的封装一下
/*
* 公用提示窗
* @export
* @param {string}[desc="确认操作"]弹框提示文字
* @param {string}[title="提示"]弹框标题
* @param{string}[confirmButtonName ='确认']确认按钮文字
* @param {string}[cancelButtonName="取消"] 取消按钮文字
* @param{boolean}[distinguishCancelAndClose = false]关系和取消是否执行同一方法
*@return
*
*/
export fu
在Element UI库中，`$confirm` 是一个非常实用的组件，用于创建具有确认和取消功能的模态对话框。这个对话框常用于用户需要进行重要操作前的二次确认，如删除、修改等。在提供的代码片段中，我们看到一个自定义函数 `confirm` 对 `$confirm` 进行了封装，以便于在项目中更方便地调用。
1. **封装`confirm`函数**：
在描述中提到的`confirm`函数接收多个参数，包括`desc`（默认为"确认操作"）、`title`（默认为"提示"）、`confirmButtonName`（默认为"确认"）、`cancelButtonName`（默认为"取消"）以及`distinguishCancelAndClose`（默认为`false`）。这个函数返回一个`$confirm`的调用结果，用于处理用户点击确认或取消后的操作。`closeOnClickModal`属性设置为`false`，意味着即使用户点击了模态背景，对话框也不会自动关闭。`type`被设定为'warning'，使得对话框呈现出警告的样式，而`center`设为`true`则让对话框内容居中显示。
2. **使用示例**：
在`submitSome`方法中，可以看到如何调用封装好的`confirm`函数。这里使用了`async/await`语法，当用户点击确认按钮时，会执行异步操作（例如向服务器发送POST请求）。如果`$confirm`的回调中抛出错误，并且错误消息为'close'或'cancel'，会根据不同的错误类型执行相应的处理逻辑。
3. **自定义内容与换行**：
有时，我们需要在确认框中展示多行文本。示例代码中通过将提示信息拆分为数组`confirmText`，然后利用`$createElement`动态创建`p`元素，将每条信息分别渲染到`message`属性中。将这个自定义的Vue组件传递给`$confirm`的`message`参数，实现了内容的换行显示。同时，设置了`showCancelButton`、`confirmButtonText`和`cancelButtonText`来控制确认和取消按钮的显示及文本。
总结来说，`$confirm`是Element UI提供的一种便捷的模态对话框组件，能够帮助开发者快速创建带有确认操作的提示窗口。通过自定义函数封装，可以统一和简化调用方式，提高代码复用性。同时，根据实际需求，我们可以对`$confirm`的各个属性进行配置，如改变按钮文字、调整样式、设置多行内容等，以满足不同场景下的用户体验需求。
- 1
- 2
前往页