Ionic Vue中如何在鼠标离开按钮时自动关闭Ionic Popover

默认情况下，设置trigger-action="hover"的Ionic Popover只会在鼠标进入按钮时打开，不会自动在鼠标离开按钮时关闭。要实现这个功能，你可以通过监听按钮的鼠标离开事件，手动调用Popover的关闭方法，具体实现如下：

• 给Popover添加引用，方便后续调用其内置方法
• 给触发按钮绑定mouseleave事件，在事件回调中执行关闭逻辑

以下是完整的Vue示例代码：

<template>
  <ion-button id="hover-trigger" @mouseleave="closePopover">Hover Over Me</ion-button>
  <ion-popover ref="hoverPopover" trigger="hover-trigger" trigger-action="hover">
    <ion-content class="ion-padding">Hello World!</ion-content>
  </ion-popover>
</template>

<script setup>
import { ref } from 'vue';
import { IonPopover } from '@ionic/vue';

// 获取Popover实例引用
const hoverPopover = ref(null);

// 关闭Popover的方法
const closePopover = () => {
  if (hoverPopover.value) {
    hoverPopover.value.dismiss();
  }
};
</script>

这段代码中，我们通过ref获取到Popover实例，当鼠标离开按钮时，触发closePopover方法，调用Popover的dismiss()方法完成关闭操作。

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