iview中 $modal.confirm如何上下居中
时间: 2023-12-20 18:12:27 浏览: 40
可以通过设置 Modal 的样式来实现上下居中显示。具体操作如下:
1. 在项目中新建一个 css 文件,例如 modal.css。
2. 在该文件中添加以下代码:
```
.ivu-modal {
display: flex;
align-items: center;
justify-content: center;
}
.ivu-modal-body {
max-height: 70vh;
overflow-y: auto;
}
```
3. 在 main.js 中引入该样式文件:
```
import '@/assets/css/modal.css'
```
4. 在使用 $modal.confirm 方法时,通过设置 style 属性来应用该样式:
```
this.$Modal.confirm({
title: '提示',
content: '确定删除该项吗?',
style: {
top: '50%',
transform: 'translateY(-50%)'
},
onOk: () => {
// 确认删除操作
}
})
```
这样就可以使 Modal 居中显示,并且设置了一个最大高度并添加了滚动条,以防止内容过长导致页面溢出。
相关问题
iview this.$Modal.confirm(config) 弹出框怎么添加类名
你可以通过 `config` 对象的 `modalClass` 属性来添加类名。具体地说,在 `config` 对象中设置 `modalClass` 属性为你想要添加的类名即可。例如:
```javascript
this.$Modal.confirm({
modalClass: 'my-custom-class',
// 其他配置项
});
```
这样就会给弹出框的容器元素添加一个名为 `my-custom-class` 的类名。你可以根据自己的需要替换 `'my-custom-class'` 为你想要的类名。
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: this.handleOk
});
},
handleOk(e) {
// 阻止对话框默认关闭行为
e.preventDefault();
// 其他操作
console.log('点击确定按钮');
}
}
}
</script>
```
在 `handleOk` 方法中,我们使用 `e.preventDefault()` 方法来阻止默认的关闭事件。这样点击确定按钮时,确认对话框就不会关闭,可以在方法中执行其他操作,比如发送请求等。