usePopover

浮层开合三件套：点击开合 + 外点关闭 + 浮动定位。LxDropdown / LxSelect 内部即用它。

何时用

自定义触发式浮层（菜单、选择面板）而现成组件不够用时。

用法

<script setup lang="ts">
import { ref } from 'vue'
import { usePopover, useMounted } from '@luxeanor/ui'

const triggerEl = ref<HTMLElement | null>(null)
const popEl = ref<HTMLElement | null>(null)
const mounted = useMounted()
const { open, toggle, close } = usePopover(triggerEl, popEl)
</script>

<template>
  <button ref="triggerEl" @click="toggle">打开</button>
  <Teleport v-if="mounted && open" to="body">
    <div ref="popEl" class="lx-popover">浮层内容</div>
  </Teleport>
</template>

API

usePopover(triggerEl: Ref<HTMLElement | null>, popEl: Ref<HTMLElement | null>)

返回	类型	说明
open	Ref<boolean>	开合状态
toggle	() => Promise<void>	开/合（打开后自动定位）
close	() => void	关闭

行为：定位固定 bottom-start（offset 6 / flip / shift）；打开时监听 mousedown 外点关闭；组件卸载自动关闭清监听。