1

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

这是我在其中调用包含 modal 的自定义组件的容器：

<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>
4

0 回答 0