在 vue $confirm 中使用checkbox

您可以在Vue的$confirm方法中使用checkbox，但需要进行一些自定义。

首先，您需要创建一个带有checkbox的模板，例如：

<template>
  <div>
    <p>{{ message }}</p>
    <label>
      <input type="checkbox" v-model="isChecked">
      {{ checkboxMessage }}
    </label>
  </div>
</template>

在这个模板中，我们添加了一个checkbox和一个label，当用户选择或取消选择时，v-model指令会将值绑定到isChecked变量上。

接下来，您需要将此模板传递给Vue的$confirm方法中：

this.$confirm({
  title: 'Confirm',
  message: 'Are you sure you want to do this?',
  cancelButtonText: 'Cancel',
  confirmButtonText: 'OK',
  customClass: 'my-custom-class',
  showCancelButton: true,
  showClose: true,
  dangerouslyUseHTMLString: true,
  center: true,
  distinguishCancelAndClose: true,
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      if (this.isChecked) {
        done();
      } else {
        instance.messageBox.vm.$nextTick(() => {
          instance.messageBox.vm.showErrorMessage('Please accept the terms and conditions.');
        });
      }
    } else {
      done();
    }
  },
  render: (h) => {
    return h(MyComponent, {
      props: {
        message: 'Please accept the terms and conditions before proceeding.',
        checkboxMessage: 'I accept the terms and conditions',
        isChecked: false
      }
    });
  }
}).then(() => {
  // user confirmed
}).catch(() => {
  // user canceled
});

在这个示例中，我们传递了一个组件MyComponent，该组件包含我们之前创建的模板。我们还将isChecked设置为false，以便在对话框中默认未选中复选框。

在beforeClose钩子函数中，我们检查用户是否勾选了复选框。如果选中，我们调用done()函数来关闭对话框。否则，我们使用showErrorMessage方法显示错误消息，并阻止对话框关闭。

注意，在使用checkbox时，您需要在beforeClose钩子函数中手动调用done()或done(false)函数，以指示对话框是否应关闭。