Popper.js中Vue 3.5的useTemplateRef与箭头中间件兼容性问题解析

在Vue 3.5版本中，模板引用(template refs)的使用方式有了新的推荐实践。本文将以Popper.js项目为例，深入分析如何正确使用Vue 3.5的useTemplateRef API与Floating UI的箭头中间件(arrow middleware)配合使用。

问题背景

Vue 3.5引入了useTemplateRef作为新的模板引用获取方式，相比传统的ref()方法，它提供了更简洁的语法。然而，当开发者尝试将这一新特性与Popper.js的箭头定位功能结合使用时，可能会遇到一些兼容性问题。

新旧API对比

传统方式使用ref()：

const floatingArrow = ref(null);

Vue 3.5推荐方式使用useTemplateRef：

const floatingArrow = useTemplateRef("floatingArrow");

常见错误场景

开发者在使用新API时可能会遇到以下问题：

1. 拼写错误：middleware拼写错误为mdidleware
2. 空格问题：引用名称中包含多余空格
3. 类型不匹配：箭头中间件期望的引用类型与新API返回的类型不完全一致

正确实现方式

以下是经过验证的正确实现方案：

import { useFloating, arrow } from '@floating-ui/vue'
import { useTemplateRef } from 'vue';

const arrowRef = useTemplateRef('arrowRef')
const floatingRef = useTemplateRef('floatingRef')
const triggerRef = useTemplateRef('triggerRef')

const { floatingStyles } = useFloating(triggerRef, floatingRef, {
  middleware: [
    arrow({
      element: arrowRef,
    }),
  ],
})

样式配置要点

为了确保箭头正确显示，还需要配置相应的CSS样式：

.arrow {
  position: absolute;
  transform: rotate(45deg);
  width: 20px;
  height: 20px;
  background: #fff;
  z-index: -1;
  pointer-events: none;
}

版本兼容性说明

该解决方案已在以下环境中验证通过：

• Vue 3.5.10
• @floating-ui/vue 1.1.5
• Node.js v20.11.0

总结

Vue 3.5的useTemplateRef API完全可以与Popper.js的箭头中间件协同工作，关键在于正确使用API和避免常见的拼写错误。开发者可以放心地采用这一新特性来简化模板引用的管理，同时享受Popper.js提供的强大定位功能。