# 浮动用户界面/浮动用户界面 `@浮动用户界面/vue` > Vue 的浮动 UI **版本：** 1.1.11（2026 年 3 月） **部署：** vue-demi@>=0.13.0、@floating-ui/dom@^1.7.6、@floating-ui/utils@^0.2.11 **标签：** 最新：1.1.11（2026 年 3 月） **参考文献：** [文档]() — API 参考、指南 ## API 变更本节记录了“@floating-ui/vue”的特定于版本的 API 更改 - 优先考虑 v1.0.0 主要版本和后续的次要更新。 * 重大问题：自 v1.0.0 起，“x”和“y”坐标现在默认为“0”，而不是“null”。使用 `isPositioned` 检查布局是否已准备好 [来源]() * 新功能：`floatingStyles` — 自 v1.0.0 起，返回浮动元素的预配置 `style` 对象（位置、顶部、左侧、变换） [来源]() * 新功能：`MaybeReadonlyRefOrGetter` — `useFloating` 选项现在支持 getter（例如，`() => props.placement`）和自 v1.1.0 以来的引用[来源]() * 新：`isPositioned` — `useFloating` 返回的布尔引用，指示自 v0.2.0 以来浮动元素是否已定位[来源]() * 新功能：`open` 选项 — `useFloating` 中的可选布尔引用，用于将 `isPositioned` 与 v0.2.0 以来元素的打开状态同步[来源]() * 改进：`ArrowOptions.element` — 将类型扩展为 `MaybeElement`，以提高与 v1.0.2 以来的 Vue 模板引用的兼容性[来源]() * 新功能：`whileElementsMounted` - 自 v1.0.0 起自动处理 `autoUpdate` 生命周期的首选选项 `useFloating` * 新功能：`update()` — 自 v0.2.0 起，`useFloating` 返回的函数可手动触发仓位重新计算 [来源]() * 新功能：对 `arrow()` 的模板引用支持 - 自 v0.x/v1.0.0 起，`arrow` 中间件中的 `element` 选项现在原生接受 Vue 引用 [来源]() **还更改：** `exports .d.mts types` v1.0.3 · `isPositioned` false 当 `open` false 修复 v1.1.5 · `MaybeReadonlyRefOrGetter` 遗留 Vue 支持 v1.1.1 ## 最佳实践 * 使用 `whileElementsMounted: autoUpdate` 确保浮动元素在滚动、调整大小或布局更改期间保持锚定。这会自动处理定位侦听器的完整生命周期[来源]() * 当将自定义函数传递给 `whileElementsMounted` 时（例如，为 `autoUpdate` 提供自定义选项时），始终返回清理函数 useFloating(参考, 浮动, { whileElementsMounted（参考，浮动，更新）{ 返回 autoUpdate(引用, 浮动, 更新, {animationFrame: true}); }, }); * 使用“whileElementsMounted”时，优先选择“v-if”作为浮动元素。如果使用“v-show”，请避免“whileElementsMounted”道具并通过观察者手动管理“autoUpdate”生命周期，以防止隐藏元素时出现性能泄漏[源]() * 使用“isPositioned”引用来协调需要最终位置的副作用，例如聚焦输入或将元素滚动到视图中[源]() const {isPositioned} = useFloating(参考, 浮动, {open}); 手表（isPositioned，（定位）=> { 如果（定位）{ inputRef.value?.focus(); } }); * 将 getter 函数或“Ref”传递给“useFloating”选项（如“placement”或“middleware”）以启用反应性。从 v1.1.0 开始，这些选项支持 `MaybeReadonlyRefOrGetter` [来源]() * 利用包装元素支持 CSS 变换动画，同时保持高性能的“transform: true”定位（默认）。外部元素处理定位，而内部元素处理动画 [来源]() * 通过将 `open` 引用传递给 `useFloating` 来同步定位状态。这确保了“isPositioned”在多个打开/关闭周期中重置并正确更新，特别是当参考元素移动时 * 将模板引用直接从“ref(null)”传递到“useFloating”和中间件，如“arrow()”。库会自动解开这些元素并等待元素安装，然后再计算坐标 [来源]() * 如果通过 CSS 转换或其他非布局触发动画移动参考元素以保持完美锚定，请在“autoUpdate”选项中启用“animationFrame: true”以保持完美锚定

浮动Ui Vue技巧

包含技能