iview中 $modal.confirm如何上下居中

可以通过设置 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` 对象的 `class` 属性来添加类名。具体地说，在 `config` 对象中设置 `class` 属性为你想要添加的类名即可。例如：

this.$Modal.confirm({
  class: 'my-custom-class',
  // 其他配置项
});

这样就会给弹出框元素添加一个名为 `my-custom-class` 的类名。你可以根据自己的需要替换 `'my-custom-class'` 为你想要的类名。

如何把用iview的this.$Modal.confirm写的弹窗的确认和取消按钮位置对换

在iView组件库中，`this.$Modal.confirm` 的默认确认和取消按钮位置是按照从左到右的顺序排列的，如果你想交换它们的位置，你需要直接修改modal实例的配置或者在渲染后的dom上动态操作。

首先，你可以通过传递一个自定义的选项对象给 `confirm` 方法，比如：

this.$Modal.confirm({
  title: '提示',
  content: '这是一个确认框',
  confirmButtonText: '取消', // 将原来的确认按钮文字改为取消
  cancelButtonText: '确定', // 将原来的取消按钮文字改为确定
  onOk() {
    console.log('点击了确定');
  },
  onCancel() {
    console.log('点击了取消');
  }
});

在这个例子中，确认按钮的文字变成了“取消”，并且它的回调函数是`onCancel`，取消按钮的文字则变成了“确定”并关联着`onOk`函数。

如果你在页面加载后想改变已经打开的模态框的按钮位置，可以通过ref属性获取模态元素，然后修改其子元素的样式或者DOM结构，但这通常不是推荐的做法，因为它可能会导致不可预知的行为，并且可能导致其他地方的交互出现问题。