Question

我正在使用Bootstrap-vue和b-modal组件。我遇到的问题是背景事件，该事件会关闭我的模态，但还会在包含b模态的组件的容器上触发onClick事件。

这是我调用包含模式的自定义组件的容器：

<template>
  <table>
    <thead>
...
</thead>
    <tbody v-for="(review, index) in reviews"
           :key="review.review.rId"
           @click="showReviewModal(review.review.rId)">
      <custom-item :review="review"/>
    </tbody>
  </table>
</template>

...

methods: {
      showReviewModal(id) {
        this.$root.$emit('bv::show::modal', id);
      }
    },

在中间自定义组件中：

<template>
  <tr>
    <fv-review-modal :id="review.review.rId" :review="review"/>
  </tr>
</template>

最后在包含b-modal的自定义组件中：

<template>
  <b-modal :ref="id"
           :id="id"
           hide-header
           hide-footer
           :modal-class="['review-modal', 'review-modal__body']">
Bla bla bla</b-modal>
</template>

我可以禁用模式外部的点击，但我想保留它：)。此外，我还考虑过应对bootstrap-vue生成的hide事件，并防止默认行为手动关闭当前模式并避免生成onClick事件。我需要测试它，但我不喜欢这种简单的解决方案。

您知道如何解决该问题吗？谢谢！

编辑：解决方案是：

 <template>
      <tr>
        <fv-review-modal :id="review.review.rId" :review="review" @click.native.stop/>
      </tr>
    </template>

在Bootstrap-Vue模态组件外部单击会生成onClick事件

0 个答案: