单击外部时关闭 ion-fab (vue3/ionic)

Posted 2023-02-22

【中文标题】单击外部时关闭 ion-fab (vue3/ionic)

【英文标题】：close ion-fab when clicking outside (vue3/ionic)

【发布时间】：2021-07-31 22:57:30

【问题描述】：

我正在尝试寻找一种在单击外部时关闭我的 ion-fab 按钮的方法。我看到使用 fab 容器是可能的，但我使用的是 ionic 的最新版本，我认为现在不可能.. 你们知道这样做的方法吗？

这是我的模板：

<ion-fab horizontal="end" vertical="bottom">
    <ion-fab-button color="light">
      <ion-icon class="sizeicon" :icon="happyOutline" />
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button>
        <ion-icon :icon="heart" @click="putReaction(roomId, 4)" />
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon :icon="happy" @click="putReaction(roomId, 3)" />
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon :icon="thumbsDownSharp" @click="putReaction(roomId, 2)" />
      </ion-fab-button>
      <ion-fab-button>
        <ion-icon :icon="thumbsUpSharp" @click="putReaction(roomId, 1)" />
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

和我的网络视图：

【参考方案1】：

我发现的唯一方法是手动单击 DOM 元素，并且只有在它处于活动状态时才这样做：

if( fabnode.activated ) fabnode.click();