r.getBoundingClientRect is not a function 报错

这个错误通常是因为r不是一个DOM元素，而是一个Vue组件实例。因此，它没有getBoundingClientRect()方法。要解决这个问题，可以将ref属性添加到DOM元素上，而不是Vue组件上。如果必须将ref属性添加到Vue组件上，则可以使用$el属性访问组件的DOM元素，然后使用getBoundingClientRect()方法。以下是一个例子：

// 将ref属性添加到DOM元素上
<div ref="myDiv"></div>

// 在Vue组件中使用getBoundingClientRect()方法
mounted() {
  const rect = this.$refs.myDiv.$el.getBoundingClientRect();
  console.log(rect.top, rect.left, rect.width, rect.height);
}