element-ui $prompt输入弹框和$confirm确认弹框用法—输入框默认值、校验、阻止关闭等问题

在前端开发中，弹出框是一种常见的用户交互形式。element-ui 是一种流行的 Vue.js 组件库，提供了一系列用于实现各种用户交互的组件，其中包括 $prompt 和 $confirm 两种弹框。
$prompt 和 $confirm 在用法上有一些区别，但它们都允许我们以一种交互式的方式与用户进行交流。本文将重点讨论这两个弹框的用法，特别关注输入框默认值、校验以及阻止关闭等问题。

1. $prompt 输入弹框

$prompt 是用于获取用户输入的弹框。它允许我们设置输入字段的默认值，也可以进行表单验证。

1.1 输入框默认值

通过 initial-value 属性，我们可以设置输入框的默认值。例如：

<el-prompt
title="请输入内容"
initial-value="默认值"
input-text-area-rows="4"
input-text-cols="50">
</el-prompt>

1.2 表单校验

$prompt 也支持表单验证。我们可以使用 rules 属性来设置验证规则。例如：

<el-prompt
title="请输入内容"
initial-value="默认值"
rules="required"
input-text-area-rows="4"
input-text-cols="50">
</el-prompt>

在上述示例中，我们设置了 required 规则，这意味着用户必须输入内容才能提交表单。

1.3 阻止关闭

有时，我们可能希望阻止用户在未提交表单或保存更改的情况下关闭 $prompt。为此，我们可以使用 show-cancel-button 属性。例如：

<el-prompt
title="请输入内容"
initial-value="默认值"
rules="required"
show-cancel-button
input-text-area-rows="4"
input-text-cols="50">
</el-prompt>

在上述示例中，如果用户试图关闭弹框，会显示一个取消按钮，并允许用户取消操作。

2. $confirm 确认弹框

$confirm 是一种更简单的弹框，主要用于向用户提问并获取一个布尔值作为回应。虽然它不如 $prompt 功能丰富，但有时却能满足简单的确认需求。

2.1 使用方式

$confirm 的使用非常简单。下面是一个基本的例子：

<el-confirm title="确认" @confirm="handleConfirm">我是标题</el-confirm>

在这里，当用户点击确认按钮时，handleConfirm 方法将被调用。

2.2 自定义按钮文本

通过 confirm-text 和 cancel-text 属性，我们可以自定义确认和取消按钮的文本。例如：

<el-confirm title="确认" confirm-text="确定" cancel-text="取消" @confirm="handleConfirm">我是标题</el-confirm>

在这个例子中，确认按钮的文本被设置为“确定”，取消按钮的文本被设置为“取消”。

2.3 阻止关闭

与 $prompt 类似，我们也可以通过 show-cancel-button 属性来阻止用户关闭 $confirm。例如：

<el-confirm title="确认" confirm-text="确定" cancel-text="取消" show-cancel-button @confirm="handleConfirm">我是标题</el-confirm>

在上述示例中，如果用户试图关闭弹框，会显示一个取消按钮，并允许用户取消操作。但是需要注意的是，对于 $confirm 弹框，即使显示了取消按钮，用户点击它也不会改变返回的确认/取消状态。即，点击取消按钮后，handleConfirm 方法仍会执行，只是其参数会是 false。如果需要实现点击取消按钮后不执行任何操作的效果，那么需要自己处理这部分逻辑。
总结：通过使用 $prompt 和 $confirm，我们可以以一种更交互式的方式与用户交流，获取用户输入或确认用户的操作。而通过设置默认值、进行表单校验以及阻止关闭等特性，我们可以进一步提升用户体验。