uni-app 切换字符搜索时鼠标滑入弹框消失

uni-app 切换字符搜索时鼠标滑入弹框消失

信息类别 信息内容
产品分类 HbuilderX
操作系统 Windows
操作系统版本 21H1
版本号 3.4.7

操作步骤：

想选择其他条件时选不了，只能用快捷键

预期结果：

想选择其他条件时鼠标滑入能选，不消失

实际结果：

想选择其他条件时选不了，只能用快捷键

bug描述：

鼠标滑入展示的下面选项，鼠标再想选择其他搜索选项时，弹出框没了，不知道是不是BUG

Image


更多关于uni-app 切换字符搜索时鼠标滑入弹框消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这问题更新的时候就发现了

更多关于uni-app 切换字符搜索时鼠标滑入弹框消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在切换字符搜索时遇到鼠标滑入弹框消失的问题，可能是由于事件冒泡或焦点丢失导致的。以下是一些可能的解决方案：

1. 阻止事件冒泡

如果你在弹框中使用了 @mouseenter 或 @mouseleave 事件，确保这些事件不会冒泡到父元素，导致弹框消失。你可以使用 @mouseenter.stop 或 @mouseleave.stop 来阻止事件冒泡。

<template>
  <div @mouseenter.stop="showPopup = true" @mouseleave.stop="showPopup = false">
    <div v-if="showPopup" class="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  }
};
</script>

2. 使用 @focus 和 @blur 事件

如果你在输入框中切换字符搜索时弹框消失，可能是因为输入框失去焦点。你可以使用 @focus 和 @blur 事件来控制弹框的显示和隐藏。

<template>
  <div>
    <input
      type="text"
      @focus="showPopup = true"
      @blur="showPopup = false"
      v-model="searchText"
    />
    <div v-if="showPopup" class="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
      searchText: ''
    };
  }
};
</script>

3. 使用 @click 事件

如果你希望点击某个元素时显示弹框，并且不希望鼠标滑入时弹框消失，可以使用 @click 事件来控制弹框的显示和隐藏。

<template>
  <div>
    <button @click="showPopup = !showPopup">切换弹框</button>
    <div v-if="showPopup" class="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  }
};
</script>

4. 使用 v-show 替代 v-if

如果你使用 v-if 来控制弹框的显示和隐藏，可能会导致弹框在切换时重新渲染，从而触发一些不必要的副作用。你可以尝试使用 v-show 来替代 v-if，这样弹框的 DOM 元素会一直存在，只是通过 CSS 控制其显示和隐藏。

<template>
  <div>
    <button @click="showPopup = !showPopup">切换弹框</button>
    <div v-show="showPopup" class="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  }
};
</script>

5. 检查 CSS 样式

确保弹框的 CSS 样式没有设置 pointer-events: none; 或其他可能影响鼠标事件的样式。

.popup {
  pointer-events: auto; /* 确保弹框可以接收鼠标事件 */
}

6. 使用 [@mouseover](/user/mouseover) 和 [@mouseout](/user/mouseout) 事件

如果你希望鼠标滑入时显示弹框，滑出时隐藏弹框，可以使用 [@mouseover](/user/mouseover) 和 [@mouseout](/user/mouseout) 事件。

<template>
  <div [@mouseover](/user/mouseover)="showPopup = true" [@mouseout](/user/mouseout)="showPopup = false">
    <div v-if="showPopup" class="popup">
      <!-- 弹框内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  }
};
</script>
回到顶部