confirm的两种用法

法一:

if ($window.confirm("是否确认删除")){ ...... }


法二:

confirm("是否确认删除? ", function(confirmed) {

if(confirmed){
......
}
});
### Element UI $confirm 方法使用说明 #### 基本用法 `$confirm` 是 Element UI 提供的一个用于创建确认对话框的方法。此方法可以接受两个参数:第一个是消息字符串,第二个是一个配置对象。 ```javascript this.$confirm('删除后无法恢复,你还要继续吗?', '删除用户信息', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { console.log('用户点击了确定'); }).catch(() => { console.log('用户点击了取消'); }); ``` 上述代码展示了如何通过 `$confirm` 创建一个带有自定义按钮文本和警告类型的确认对话框[^1]。 #### 自定义样式 当尝试修改由 `$confirm` 产生的弹框样式时,由于这些元素并非 Vue 组件的一部分,因此直接在 scoped 样式中定义可能不会起作用。解决办法是在应用的根组件 (如 `App.vue`) 的 `<style>` 标签内添加全局 CSS 或者在同一页面上增加未加 `scoped` 属性的样式标签来覆盖默认样式。 #### 处理批量操作中的 Confirm 对话框 如果希望基于一组项目触发一系列连续的确认对话框,则需要注意 JavaScript 的异步行为可能导致仅显示最后一个项目的对话框。为了避免这种情况,建议采用 `for await...of` 结构以确保每次等待用户的响应后再处理下一个项: ```javascript (async () => { const items = ['item1', 'item2', 'item3']; for await (const item of items) { try { await this.$confirm(`即将删除 ${item}, 是否继续?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }); // 用户选择了 "确定" console.log(`${item} 已被成功删除`); } catch (_) { // 用户选择了 "取消" 或关闭窗口 console.log(`已取消对 ${item} 的删除`); break; } } })(); ``` 这段代码展示了一种优雅的方式来进行多项目的逐一确认,并且只有当所有前序动作都被肯定回应才会继续后续的操作[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值