Vue3+DaisyUI下拉菜单在iOS设备无法触发的解决方案咨询

问题根源 #

1. 类名切换逻辑错误：原代码用absolute替换hidden类，但DaisyUI的dropdown-content默认已包含absolute定位，错误的类名替换会导致iOS下样式渲染异常，无法正常显示菜单。
2. 事件冲突：菜单<ul>上绑定的@click会在点击菜单项时立即触发菜单关闭，同时iOS对事件触发的优先级处理可能干扰按钮的点击事件捕获。
3. 冗余事件绑定：混用@touchstart+@mousedown会导致Android端出现重复触发、误触等问题，Vue原生@click已兼容移动端无需额外绑定。

解决方案 #

1. 修正类名逻辑：默认保留absolute定位，仅通过hidden类控制菜单显隐
2. 移除菜单容器的@click绑定：避免点击菜单项时误触发关闭，如需点击空白处关闭可单独实现
3. 保留原生@click：依赖Vue的移动端事件兼容性，无需额外绑定触摸事件

修改后的完整代码 #

Script 部分 #

<script setup>
import { ref } from "vue";

const mobileMenu = ref(false);

const toggleMobileMenu = () => {
  mobileMenu.value = !mobileMenu.value;
};
</script>

Template 部分 #

<template>
<!-- Mobile dropdown menu -->
<div class="dropdown md:hidden lg:hidden xl:hidden 2xl:hidden">
  <button class="btn btn-primary btn-xs" @click="toggleMobileMenu">
    <HomeIcon class="h-2 w-2 icon" />
    {{ $t("header.navigation.menu") }}
  </button>
  <!-- 修正类名：默认absolute，通过hidden控制显隐 -->
  <ul
    :class="{ hidden: !mobileMenu }"
    class="dropdown-content menu-vertical absolute mr-5 mt-5 p-2 overflow-y-scroll shadow bg-base-100 rounded-box w-fit"
  >
    <li>
      <RouterLink to="/">
        <button class="btn btn-primary btn-xs my-2 mr-5">
          <HomeIcon class="h-2 w-2 icon" />
          {{ $t("header.navigation.home") }}
        </button>
      </RouterLink>
    </li>
    <li>
      <RouterLink to="/art">
        <button class="btn btn-primary btn-xs my-2 mr-5">
          <PaintBrushIcon class="h-2 w-2 icon" />
          {{ $t("header.navigation.art") }}
        </button>
      </RouterLink>
    </li>
    <li>
      <RouterLink to="/photos">
        <button class="btn btn-primary btn-xs my-2 mr-5">
          <BeakerIcon class="h-2 w-2 icon" />
          {{ $t("header.navigation.photos") }}
        </button>
      </RouterLink>
    </li>
  </ul>
</div>
<!-- End of Mobile dropdown menu -->
</template>

可选优化：点击空白处关闭菜单 #

如果需要点击菜单外部自动关闭下拉，可添加全局点击监听：

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

const mobileMenu = ref(false);
const toggleMobileMenu = () => {
  mobileMenu.value = !mobileMenu.value;
};

const handleClickOutside = (e) => {
  const dropdown = document.querySelector('.dropdown.md\\:hidden');
  if (dropdown && !dropdown.contains(e.target)) {
    mobileMenu.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

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