Vue获取元素位置 getBoundingClientRect is not a function

最新推荐文章于 2025-04-17 10:56:29 发布

原创最新推荐文章于 2025-04-17 10:56:29 发布 · 2.1w 阅读

3 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍在Vue中如何避免使用ref获取DOM元素时出现TypeError，并提供正确的获取DOM元素位置的方法。通过使用e.target代替this.$refs，可以成功调用getBoundingClientRect()方法，获取到元素的准确位置。

该文章已生成可运行项目，

点击input获取该元素位置

一开始使用 ref 获取dom元素，然后调用getBoundingClientRect()方法

<div @click="getInput" >
  <Input type="text"  readonly="readonly" ref="inputDom"></Input>
</div>

methods: {
   getInput () {
      let obj = this.$refs['inputDom']
      let objSet = obj.getBoundingClientRect()
      console.log(objSet)
   }
}

控制台会报错 Uncaught TypeError: obj.getBoundingClientRect is not a function

查看使用ref获取的dom元素即obj 是个VueComponent，改成下面的写法就ok了

<div @click="getInput" >
  <Input type="text"  readonly="readonly" ref="inputDom"></Input>
</div>

methods: {
   getInput: function (e) {
      let obj = e.target
      let objSet = obj.getBoundingClientRect()
      console.log(objSet)
   }
}

控制台输出结果 DOMRect {x: 296, y: 139, width: 206.25, height: 32, top: 139, …}

此时使用e.target获取的obj对象是 input.ivu-input.ivu-input-default

本文章已经生成可运行项目