javascript - Vue.js - 如何将事件处理程序添加到 Bootstrap 元素

Question

我有一个使用 Bootstrap 5 的应用程序。在这个应用程序中，我有一个Offcanvas 组件。当这个组件关闭时，我需要做一些工作。为了尝试做到这一点，我想加入hide.bs.offcanvas事件。我的 Vue 项目如下所示：

<template>
  <div>
    ...
    <div class="offcanvas offcanvas-bottom overlay-offcanvas" tabindex="-1" id="myOffCanvas" ref="myOffCanvas" aria-labelledby="overlayOffCanvasLabel" data-bs-backdrop="false">
      <div class="offcanvas-header bg-secondary text-white">
        <h6 class="offcanvas-title" id="overlayOffCanvasLabel">Hello</h6>
        <button data-bs-dismiss="offcanvas">x</button>
      </div>
      <div class="offcanvas-body">
         Hello, world
      </div>
    </div>

  </div>
</template>
<script>
  import { Offcanvas } from 'bootstrap';

  export default {
    data() {
      myOffCanvas: null
    },

    methods: {
      onOffcanvasHidden() {
        alert('Good bye!');
      }
    },

    mounted() {
      this.myOffCanvas = new Offcanvas(this.$refs.myOffCanvas);
    }
  }
</script>

onOffcanvasHidden关闭画布元素时如何调用？换句话说，我如何将事件处理程序连接到hide.bs.offcanvas来自 Vue.js 的事件？

标签： javascriptvue.js