如何在Vue.js中监听Flowbite下拉插件的data-dropdown-toggle属性

方法1：监听链接点击手动关闭下拉 #

给下拉菜单内的跳转链接绑定点击事件，主动触发下拉关闭逻辑：

<template>
  <!-- 下拉切换按钮 -->
  <button data-dropdown-toggle="user-dropdown" type="button">
    用户菜单
  </button>
  <!-- 下拉菜单 -->
  <div id="user-dropdown" class="hidden ...">
    <a href="/profile" @click="closeDropdown('user-dropdown')">个人主页</a>
    <a href="/settings" @click="closeDropdown('user-dropdown')">设置</a>
  </div>
</template>

<script>
export default {
  methods: {
    closeDropdown(dropdownId) {
      // 获取对应下拉的切换按钮和菜单元素
      const toggleBtn = document.querySelector(`[data-dropdown-toggle="${dropdownId}"]`);
      const dropdownMenu = document.getElementById(dropdownId);
      
      // 恢复隐藏状态并更新无障碍属性
      dropdownMenu.classList.add('hidden');
      toggleBtn.setAttribute('aria-expanded', 'false');
    }
  }
}
</script>

方法2：路由守卫自动关闭（单页应用场景） #

如果使用Vue Router做单页路由，可在组件内或全局路由守卫中，在路由跳转时批量关闭所有展开的下拉：

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // 定位所有处于展开状态的下拉切换按钮
    const openToggles = document.querySelectorAll('[data-dropdown-toggle][aria-expanded="true"]');
    
    openToggles.forEach(toggle => {
      const dropdownId = toggle.getAttribute('data-dropdown-toggle');
      const dropdownMenu = document.getElementById(dropdownId);
      
      dropdownMenu.classList.add('hidden');
      toggle.setAttribute('aria-expanded', 'false');
    });
    
    next();
  }
}
</script>

方法3：调用Flowbite实例的内置方法 #

如果已手动初始化Flowbite的Dropdown实例，可直接调用官方提供的hide()方法关闭下拉：

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

export default {
  mounted() {
    // 初始化下拉实例并保存到组件实例中
    this.userDropdown = new Dropdown(document.querySelector('[data-dropdown-toggle="user-dropdown"]'));
  },
  methods: {
    closeDropdown() {
      this.userDropdown.hide();
    }
  }
}
</script>

核心逻辑说明 #

Flowbite下拉菜单的显示/隐藏是通过hidden类和aria-expanded属性控制的，只要在链接跳转前手动恢复这两个状态即可解决问题。单页应用因为页面不会刷新，必须主动触发关闭动作；多页应用若仍出现此问题，大概率是浏览器缓存了DOM状态，用上述方法强制关闭即可。

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