Vue获取元素位置 getBoundingClientRect is not a function
点击input获取该元素位置一开始使用 ref 获取dom元素,然后调用getBoundingClientRect()方法<div @click="getInput" ><Input type="text"readonly="readonly" ref="inputDom"&a
·
点击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
更多推荐
已为社区贡献4条内容
所有评论(0)