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

点击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