this.$confirm 居中

要将`this.$confirm`居中，您可以使用以下方法：

1. 使用CSS样式：通过为确认框添加一个自定义的样式类，并在样式类中设置`text-align: center;`以实现居中对齐。例如：

.centered-confirm {
  text-align: center;
}

然后，在调用`this.$confirm`时，将该样式类添加到确认框的`customClass`属性中：

this.$confirm('确认框内容', '确认框标题', {
  customClass: 'centered-confirm',
});

2. 使用slot插槽：`this.$confirm`会生成一个带有默认插槽的确认框，您可以使用该插槽来自定义确认框的内容。通过在插槽中包裹内容，并使用CSS样式将其居中。例如：

this.$confirm({
  title: '确认框标题',
  render: (h) => {
    return h('div', { style: 'text-align: center;' }, [
      '确认框内容',
    ]);
  },
});

这两种方法都可以将`this.$confirm`居中对齐。您可以根据自己的需求选择其中之一来实现居中效果。

相关问题

ant this.$confirm 按钮居中

在Ant Design中，可以使用`this.$confirm`方法来创建一个确认对话框。要将确认对话框的按钮居中，可以通过自定义样式来实现。

首先，在创建确认对话框时，可以通过`buttonProps`属性来设置按钮的属性。其中，可以使用`style`属性来设置按钮的样式。

例如，可以将按钮的样式设置为居中对齐：

this.$confirm({
  // 其他配置项...
  buttonProps: {
    style: {
      textAlign: 'center'
    }
  }
});

这样，确认对话框中的按钮就会居中显示。

vue this.$confirm( ） 居中布局，但标题不居中

Vue.js 的 `this.$confirm` 是 Element UI 提供的一个确认提示组件，通常用于弹出一个模态框进行确认操作。如果你想让这个提示框整体居中显示，但是标题不居中，可以尝试以下几种方法：

1. **CSS 样式调整**：
- 给 `.el-message-box__title` 类添加样式，设置 `text-align` 为 `left` 或者自定义偏移量，如 `margin-left` 来定位标题。

   .el-message-box__title {
     text-align: left;
     /* 或者 */
     margin-left: auto; /* 如果你想保持顶部对齐 */
   }

2. **自定义模板**：
如果允许修改 Vue 实例的模板，你可以创建一个自定义组件，覆盖默认的 `message-box` 模板，并在其中调整标题的位置。

3. **事件绑定**：
可能需要监听 `on-confirm` 或 `on-cancel` 事件，在处理函数中动态调整标题样式。

记得在应用这些更改后，确保将它们传递给组件实例，例如：

this.$confirm({
  title: '这是非居中的标题',
  // 其他配置...
  customClass: 'your-custom-class', // 或者直接在 CSS 中引用该类名
}).then(() => {
  // 确认回调
}).catch(() => {
  // 取消回调
});