Vue.js 2.6.12结合Bootstrap 5.1.0封装Dropdown点击外部不自动关闭问题

问题根本原因 #

你的代码同时触发了两次Dropdown实例初始化：

• button上的data-bs-toggle="dropdown"属性会被Bootstrap自动扫描，生成一个内置Dropdown实例
• 你在mounted钩子中又手动new Dropdown()创建了第二个实例
  两个实例的事件监听逻辑冲突，导致外部点击自动关闭的逻辑失效。

解决方法 #

删除button标签上的data-bs-toggle="dropdown"属性，完全使用手动创建的实例控制组件，同时补充组件销毁时的实例清理逻辑避免内存泄漏即可。

修正后完整代码 #

<template>
  <div ref="el" class="dropdown">
    <button
      class="btn btn-primary dropdown-toggle"
      type="button"
      aria-expanded="false"
    >
      请选择...
    </button>
    <ul class="dropdown-menu">
      <slot></slot>
    </ul>
  </div>
</template>

<script>
import { Dropdown } from 'bootstrap';

export default {
  name: 'BootstrapDropdown',
  data() {
    return {
      dropdown: null,
    };
  },
  mounted() {
    const { el } = this.$refs;

    this.dropdown = new Dropdown(el, {
      autoClose: true,
    });

    ['show', 'shown', 'hide', 'hidden'].forEach((e) => {
      el.addEventListener(`${e}.bs.dropdown`, () => {
        this.$emit(e);
      });
    });
  },
  beforeDestroy() {
    if (this.dropdown) {
      this.dropdown.dispose()
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者GoldenAxe