如何在 Vue 中巧妙地隐藏 Modal.confirm() 对话框中的确定或取消按钮？

在使用 Vue 开发应用程序时，我们经常需要使用 Modal 对话框来提示用户确认操作或收集信息。Ant Design Vue（Antd）提供了灵活且易用的 Modal API，其中包括一个方便的 Modal.confirm() 方法。然而，有时我们需要针对特定场景进行更精细的控制，例如单独隐藏默认的确定或取消按钮。本文将探讨如何在 Vue 中使用 Antd 轻松实现这一目标，同时保持代码的简洁性和可读性。

隐藏确定或取消按钮

Antd 为 Modal.confirm() 方法提供了两个参数，可用于单独修改确定和取消按钮：

• okText： 修改确定按钮的文本。
• cancelText： 修改取消按钮的文本。

要隐藏按钮，我们可以将相应的文本设置为一个空字符串，如下所示：

this.$confirm({
  title: '确认操作？',
  content: '此操作将永久删除该数据。',
  okText: '', // 隐藏确定按钮
  cancelText: '取消',
});

这将隐藏确定按钮，同时保留取消按钮。类似地，我们可以隐藏取消按钮：

this.$confirm({
  title: '确认操作？',
  content: '此操作将永久删除该数据。',
  okText: '确定',
  cancelText: '', // 隐藏取消按钮
});

使用 footer 属性

Antd 还提供了一个 footer 属性，它允许我们完全自定义对话框的底部内容，包括按钮。我们可以使用此属性来创建自己的按钮或完全删除它们。例如，要删除所有按钮，我们可以设置 footer 为 null：

this.$confirm({
  title: '确认操作？',
  content: '此操作将永久删除该数据。',
  footer: null,
});

使用 render 函数

对于更高级别的自定义，我们可以使用 render 函数来创建完全自定义的对话框内容。这使我们能够控制对话框中的每个元素，包括按钮。以下示例演示了如何使用 render 函数隐藏确定按钮：

this.$confirm({
  title: '确认操作？',
  content: '此操作将永久删除该数据。',
  render: (h) => {
    return h('div', [
      h('p', { slot: 'title' }, '确认操作？'),
      h('p', { slot: 'content' }, '此操作将永久删除该数据。'),
      h('div', { slot: 'footer' }, [
        h('Button', {
          props: {
            type: 'primary',
            size: 'large',
          },
          on: {
            click: () => {
              this.$confirm.close();
            },
          },
        }, '确定'),
        h('Button', {
          props: {
            type: 'default',
            size: 'large',
          },
          on: {
            click: () => {
              this.$confirm.close();
            },
          },
        }, '取消'),
      ]),
    ]);
  },
});

结论

在 Vue.js 中使用 Antd 单独隐藏 Modal.confirm() 对话框中的确定或取消按钮是一种常见的需求。Antd 提供了灵活的参数和属性，使我们能够轻松地实现这一目标。本文介绍了三种方法：使用 okText 和 cancelText 参数、使用 footer 属性，以及使用 render 函数。根据具体情况选择最合适的解决方案，可以帮助开发人员创建用户友好且高度可定制的应用程序。