解决Bootstrap Vue模态不会在点击外部时关闭的方法

有时，在使用Bootstrap Vue的模态时，点击模态外部时，模态并不会关闭。这种情况可能会破坏用户体验，因为用户可能会期望点击模态外部时，模态会自动关闭。

但是，不用担心！这个问题很容易解决。下面将介绍两种方法，您可以根据自己的需要来选择合适的方法。

方法一：使用no-close-on-backdrop属性

在Bootstrap Vue的模态上，有一个名为no-close-on-backdrop的属性。该属性可用于防止点击模态背景时关闭模态。但是，如果将该属性设置为true，则表示点击模态背景时不会关闭模态。因此，您可以将该属性设置为false，以允许用户点击模态外部时关闭模态。

<b-modal v-model="showModal" no-close-on-backdrop="false">
  <!-- 模态内容 -->
</b-modal>

方法二：使用@hide事件

另一种方法是，在Bootstrap Vue的模态上使用@hide事件。该事件在模态隐藏之前被触发，并且您可以在该事件中执行任何自定义逻辑。例如，在@hide事件中，您可以设置一个标志，以记录用户是否通过点击模态外部来关闭模态。

<b-modal v-model="showModal" @hide="hideModal">
  <!-- 模态内容 -->
</b-modal>

data() {
  return {
    showModal: false,
    isClosedByBackdrop: false
  }
},
methods: {
  hideModal() {
    if (this.isClosedByBackdrop) {
      this.isClosedByBackdrop = false;
    } else {
      this.showModal = false;
    }
  }
}

上面的代码中，我们使用一个名为isClosedByBackdrop的标志来记录用户是否通过点击模态背景来关闭模态。在@hide事件中，我们检查该标志。如果该标志为true，则表示用户通过点击模态背景来关闭模态。在这种情况下，我们将该标志重置为false。否则，我们关闭模态。

结论

以上就是解决Bootstrap Vue模态不会在点击外部时关闭的两种方法。您可以根据自己的需要选择其中一种方法。如果您希望用户能够通过点击模态外部来关闭模态，那么第一种方法可能是更简单的选择。如果您需要执行更多自定义逻辑，或者需要更多的控制，那么第二种方法可能更适合您。