FlatDropdown 扁平下拉

基础用法

悬停触发器即可展开。指针离开后面板会保留 closeDelay 毫秒，方便你把指针移进去。close-on-content-click 让面板在内部任意点击后关闭。

示例加载中...

trigger 决定面板如何被唤起：

当面板需要跟随应用状态而非指针意图时（例如由快捷键唤起的下拉），使用 manual。

不绑定 v-model 时组件自行维护开合状态。绑定后则由你接管 —— 组件仍会发出 open / close 事件，但除非交互被允许，否则不会自行改变该值。

disabled 会阻断所有展开路径，包括通过触发器插槽的 show() 进行的程序化调用。

面板默认由内容撑开。两个逃生舱：

三条互相独立、可分别开关的关闭路径：

closeOnClickOutside 仅对 click 与 hover 生效 —— manual 下关闭逻辑完全由宿主掌控。

属性	类型	默认值	说明
`modelValue`	`boolean`	`undefined`	受控开合状态，省略则为非受控。
`trigger`	`'hover' \| 'click' \| 'manual'`	`'hover'`	面板唤起方式。
`placement`	`Placement`	`'bottom-start'`	相对触发器的浮层位置。
`offset`	`number`	`10`	触发器与面板之间的间距（px）。
`openDelay`	`number`	`0`	悬停/聚焦后展开的延迟（ms）。
`closeDelay`	`number`	`600`	指针离开后关闭的延迟（ms）。
`exitDuration`	`number`	`280`	退出动画（缩放 + 模糊）时长（ms）。
`disabled`	`boolean`	`false`	禁用全部交互。
`teleport`	`boolean \| string`	`'body'`	传送目标，传 `false` 则就地渲染。
`matchTriggerWidth`	`boolean`	`false`	面板最小宽度对齐触发器宽度。
`width`	`number \| string`	`undefined`	固定面板宽度，覆盖 `matchTriggerWidth`。
`closeOnClickOutside`	`boolean`	`true`	点击外部时关闭。
`closeOnEsc`	`boolean`	`true`	按下 Escape 时关闭。
`closeOnContentClick`	`boolean`	`false`	面板内点击后关闭。
`panelClass`	`TxFlatDropdownClass`	`undefined`	合并到面板元素上的额外 class。

插槽	参数	说明
`trigger`	`{ open, toggle, show, hide }`	锚点元素。
`default`	`{ open, close, side }`	面板内容，`side` 为翻转后的实际方向。

破坏性或会改变状态的菜单优先用 trigger="click" —— 悬停展开在触控板上很容易误触。
hover 模式下 closeDelay 要留足（默认 600）；太短会让指针斜向移入面板变得非常难受。
当下拉位于自带层叠或裁剪上下文的容器内、且需要继承该上下文时，设 teleport="false"。注意就地渲染会重新暴露在祖先的 overflow: hidden 之下。
用 side 插槽参数翻转你自己的装饰元素（箭头、阴影），以配合面板翻转到触发器上方的情况。
不要假设面板在展开后就已完成定位 —— 位置是响应式异步写回的，若需读取绝对几何请放到 requestAnimationFrame 中测量。
触发器包装元素会通过 aria-haspopup、aria-expanded 与 aria-controls（指向面板生成的 id）声明面板，插槽里的 <button> 触发器会自动获得展开语义。

组件：packages/tuffex/packages/components/src/flat-dropdown/src/TxFlatDropdown.vue
类型：packages/tuffex/packages/components/src/flat-dropdown/src/types.ts