Vue.js Bootstrap Modal 隐藏事件

在 Vue.js 中，我们可以使用 Bootstrap 的 Modal 组件来展示弹窗。通常，我们需要在弹窗隐藏时执行一些操作，比如清空表单数据或者关闭视频播放器等。

本文将介绍如何在 Vue.js 中监听 Bootstrap Modal 隐藏事件，并执行相应的操作。

步骤

安装 Bootstrap

如果你的项目中还没有引入 Bootstrap，可以通过以下命令安装：

npm install bootstrap jquery popper.js

在 main.js 文件中引入 Bootstrap：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

此外，注意在 index.html 文件中引入 jQuery 和 Popper.js：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Popper.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>

创建 Modal 组件

在 Vue.js 中，我们可以使用 Vue.js 官方提供的 Modal 组件 来展示弹窗。

<template>
  <div>
    <!-- trigger button -->
    <button @click="showModal">Show Modal</button>
    <!-- modal -->
    <modal v-if="show" @hide="handleHideModal">
      <h1>Modal Title</h1>
      <p>Modal Content</p>
    </modal>
  </div>
</template>

<script>
import { ref } from 'vue'
import Modal from './Modal.vue'

export default {
  components: {
    Modal
  },
  setup() {
    const show = ref(false)

    const showModal = () => {
      show.value = true
    }

    const handleHideModal = () => {
      show.value = false
      // do something when modal is hidden
    }

    return {
      show,
      showModal,
      handleHideModal
    }
  }
}
</script>

在 Modal 组件中，我们可以通过 @hide 事件来监听隐藏事件，并在回调函数中执行相应的操作。注意，在回调函数中，我们需要将 show 变量的值设为 false，以确保下次打开 Modal 时它是隐藏的。

在 Modal 组件中监听隐藏事件

在 Modal 组件中，我们可以使用 mounted 钩子函数来监听 hide.bs.modal 事件（即隐藏事件），并触发 hide 事件：

<template>
  <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" @hide="$emit('hide')">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    const modal = new bootstrap.Modal(this.$el)
    modal.on('hide.bs.modal', () => {
      this.$emit('hide')
    })
  }
}
</script>

在 mounted 钩子函数中，我们首先通过 this.$el 获取到 Modal 根元素（即包含 .modal 类名的元素），然后使用 Bootstrap 的 Modal 对象来初始化 Modal 组件，并绑定 hide.bs.modal 事件。在 hide.bs.modal 事件触发时，我们触发 hide 事件，通知父组件隐藏事件已经发生。

注意事项

• 监听 Modal 隐藏事件时，要使用 hide.bs.modal 事件，而不是 hidden.bs.modal 事件。前者会在 Modal 开始隐藏时触发，而后者则会在 Modal 完全隐藏后触发。
• 如果在监听 Modal 隐藏事件时发现，回调函数执行了多次（比如执行了两次），可能是因为 Modal 初始化了多个实例。可以通过在回调函数中打印调用栈来检查问题所在。

到此为止，我们已经介绍了如何在 Vue.js 中监听 Bootstrap Modal 隐藏事件，并执行相应的操作。希望这篇文章能帮助你更好地开发 Vue.js 应用！