vue中如何获取元素相对浏览器窗口的位置信息

Question

有一个input标签，初始化渲染之后怎么获取它相对屏幕的x, y 坐标？

<el-input size="mini"
    ref="nodesSearchInput"
    @keyup.enter.native="filterNode"
    placeholder="输入节点，按Enter搜索"
    v-model.trim="filterText"
    >
</el-input>

使用this.$refs['nodesSearchInput'].getBoundingClientRect()获取到的undefined，使用this.$refs['nodesSearchInput'].offsetWidth也是undefined。
请问应该如何获取？？？

Answer 1

`el-input`是一个组件，`this.$refs['nodesSearchInput']`获取到的是一个`VueComponent`啊，你执行`getBoundingClientRect`会报错的吧。
你可以用`this.$refs['nodesSearchInput'].$el.getBoundingClientRect()`

Answer 2

this.$refs.nodesSearchInput.$el.getBoundingClientRect()

Answer 3

this.$refs'nodesSearchInput'.getBoundingClientRect();
试试这个