this.$Modal.confirm点击确定触发onok的时候怎么阻止对话框默认关闭行为
时间: 2023-12-20 11:22:05 浏览: 33
在 iView 中,使用 `this.$Modal.confirm` 弹出的确认对话框,可以通过在 `on-ok` 事件中使用 `e.preventDefault()` 方法来阻止对话框默认的关闭行为。具体实现方式如下:
```vue
<template>
<div>
<Button type="primary" @click="showConfirm">打开确认对话框</Button>
</div>
</template>
<script>
export default {
methods: {
showConfirm() {
this.$Modal.confirm({
title: '确认对话框',
content: '你确定要执行此操作吗?',
onOk: this.handleOk
});
},
handleOk(e) {
// 阻止对话框默认关闭行为
e.preventDefault();
// 其他操作
console.log('点击确定按钮');
}
}
}
</script>
```
在 `handleOk` 方法中,我们使用 `e.preventDefault()` 方法来阻止默认的关闭事件。这样点击确定按钮时,确认对话框就不会关闭,可以在方法中执行其他操作,比如发送请求等。
相关问题
this.$Modal.confirm点击确定触发onok()=>{}的时候怎么阻止对话框默认关闭行为
在 iView 中,使用 `this.$Modal.confirm` 弹出的确认对话框,可以通过在 `on-ok` 函数中使用 `e.preventDefault()` 方法来阻止对话框默认的关闭行为。具体实现方式如下:
```vue
<template>
<div>
<Button type="primary" @click="showConfirm">打开确认对话框</Button>
</div>
</template>
<script>
export default {
methods: {
showConfirm() {
this.$Modal.confirm({
title: '确认对话框',
content: '你确定要执行此操作吗?',
onOk: e => {
// 阻止对话框默认关闭行为
e.preventDefault();
// 其他操作
console.log('点击确定按钮');
}
});
}
}
}
</script>
```
在 `onOk` 函数中,我们使用箭头函数来定义函数体,并使用 `e.preventDefault()` 方法来阻止默认的关闭事件。这样点击确定按钮时,确认对话框就不会关闭,可以在函数中执行其他操作,比如发送请求等。
this.$modal.confirm怎么设置样式
你可以通过在样式表中定义相应的 CSS 类来设置 this.$modal.confirm 的样式。然后在调用 this.$modal.confirm 时,将该 CSS 类作为参数传递给它。例如:
在样式表中定义一个名为 my-modal 的 CSS 类:
.my-modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 2px 4px rgba(, , , .2);
}
然后在调用 this.$modal.confirm 时,将该 CSS 类作为参数传递给它:
this.$modal.confirm({
title: '确认删除',
message: '您确定要删除这条记录吗?',
customClass: 'my-modal',
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(() => {
// 用户点击了确定按钮
}).catch(() => {
// 用户点击了取消按钮
});