【前端的3种弹窗】

悠悠 2023-09-24 18:28 58阅读 0赞

### 一、alert弹窗 ###

窗口中只能进行"确认"按钮操作

this.$alert(
          "提示信息",
          "提示",
          {
        
            confirmButtonText: "确定",
            callback: (action) => {
        
            }
          }
        )

### 二、confirm弹窗 ###

窗口中能进行"确认"和"取消"按钮操作

this.$confirm('提示信息?', '提示', {
        
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
        
              this.$message({
        
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
        
              this.$message({
        
                type: 'info',
                message: '已取消删除'
              });          
           });

点击确定按钮,调用then方法指定的内容，点击取消按钮，调用catch方法指定的内容；  
如果then中的方法在运行过程中抛出错误，也会被catch方法捕获。

### 三、prompt弹窗 ###

窗口中能进行"确认"和"取消"按钮操作，并有输入框可输入文本

提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 “”。  
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框 。  
例如：var theResponse = window.prompt(“欢迎？”,“请在此输入您的姓名。”);  
![在这里插入图片描述][3ae18b877ab4423fb0bba18fcbd2bf08.png]

[3ae18b877ab4423fb0bba18fcbd2bf08.png]: https://img-blog.csdnimg.cn/3ae18b877ab4423fb0bba18fcbd2bf08.png