uni-app 鼠标从option图标离开后下面的弹出层选项也消失了

示例代码：

工具界面操作，无代码

操作步骤：

如果先点击底部的工具栏，控制台那个，鼠标移到搜索框前面的图标，展开的扩展项目不能选择，

预期结果：

鼠标移到搜索框前面的图标，展开的扩展项目可以选择

实际结果：

鼠标移到搜索框前面的图标，鼠标移开后，展开的扩展项目直接消失不能选择，

bug描述：

如果先点击底部的工具栏，控制台那个，鼠标移到搜索框前面的图标，展开的扩展项目不能选择，

htzhanglong 1楼•18 天前

已复现

eggper 2楼•18 天前

在 uni-app 中，如果你希望鼠标离开 option 图标后，下面的弹出层选项不会立即消失，你可以通过以下方式来实现：

1. 使用 `hover` 和 `mouseleave` 事件

你可以通过监听 mouseenter 和 mouseleave 事件来控制弹出层的显示和隐藏。

<template>
  <view>
    <view @mouseenter="showPopup = true" @mouseleave="handleMouseLeave">
      <!-- option图标 -->
      <image src="/static/option.png" mode="aspectFit"></image>
    </view>
    
    <!-- 弹出层 -->
    <view v-if="showPopup" class="popup">
      <view>选项1</view>
      <view>选项2</view>
      <view>选项3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      timeoutId: null
    };
  },
  methods: {
    handleMouseLeave() {
      // 设置一个延时，让用户有时间移动到弹出层
      this.timeoutId = setTimeout(() => {
        this.showPopup = false;
      }, 300); // 300ms 的延时
    },
    handlePopupMouseEnter() {
      // 如果用户移动到弹出层，取消隐藏
      clearTimeout(this.timeoutId);
    },
    handlePopupMouseLeave() {
      // 用户离开弹出层，隐藏弹出层
      this.showPopup = false;
    }
  }
};
</script>

<style>
.popup {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
}
</style>

2. 使用 `uni-popup` 组件

uni-app 提供了 uni-popup 组件，可以更方便地实现弹出层效果。

<template>
  <view>
    <view @click="togglePopup">
      <!-- option图标 -->
      <image src="/static/option.png" mode="aspectFit"></image>
    </view>
    
    <!-- 弹出层 -->
    <uni-popup ref="popup" type="bottom">
      <view>选项1</view>
      <view>选项2</view>
      <view>选项3</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    togglePopup() {
      this.$refs.popup.open();
    }
  }
};
</script>

3. 使用 `v-show` 和 `mouseleave` 事件

你也可以使用 v-show 来控制弹出层的显示和隐藏，结合 mouseleave 事件来实现类似的效果。

<template>
  <view>
    <view @mouseenter="showPopup = true" @mouseleave="handleMouseLeave">
      <!-- option图标 -->
      <image src="/static/option.png" mode="aspectFit"></image>
    </view>
    
    <!-- 弹出层 -->
    <view v-show="showPopup" class="popup" @mouseenter="handlePopupMouseEnter" @mouseleave="handlePopupMouseLeave">
      <view>选项1</view>
      <view>选项2</view>
      <view>选项3</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      timeoutId: null
    };
  },
  methods: {
    handleMouseLeave() {
      // 设置一个延时，让用户有时间移动到弹出层
      this.timeoutId = setTimeout(() => {
        this.showPopup = false;
      }, 300); // 300ms 的延时
    },
    handlePopupMouseEnter() {
      // 如果用户移动到弹出层，取消隐藏
      clearTimeout(this.timeoutId);
    },
    handlePopupMouseLeave() {
      // 用户离开弹出层，隐藏弹出层
      this.showPopup = false;
    }
  }
};
</script>

<style>
.popup {
  position: absolute;
  top: 40px;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 1000;
}
</style>