alter确认框的使用
时间: 2024-05-15 21:13:51 浏览: 10
在前端开发中,常常需要使用到确认框来提示用户是否确认执行某个操作,常见的确认框有浏览器自带的确认框和第三方库(如SweetAlert)提供的确认框。
浏览器自带的确认框使用方法如下:
```javascript
if (confirm('确定执行此操作吗?')) {
// 用户点击了确认按钮,执行操作
} else {
// 用户点击了取消按钮,不执行操作
}
```
其中 `confirm` 函数的参数是确认框中要显示的提示信息,返回值是一个布尔值,表示用户点击了确认按钮还是取消按钮。
第三方库SweetAlert的使用方法如下:
```javascript
Swal.fire({
title: '确定执行此操作吗?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then((result) => {
if (result.isConfirmed) {
// 用户点击了确认按钮,执行操作
} else if (result.dismiss === Swal.DismissReason.cancel) {
// 用户点击了取消按钮,不执行操作
}
})
```
其中 `Swal.fire` 函数的参数是配置对象,可以设置确认框的标题、图标、确认按钮文字、取消按钮文字等信息。函数的返回值是一个Promise对象,通过 `then` 方法可以获取用户的选择结果。如果用户点击了确认按钮,`result.isConfirmed` 的值为 `true`,如果用户点击了取消按钮,`result.dismiss` 的值为 `Swal.DismissReason.cancel`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)