項目中使用vue+typescript

使用this.$refs.refsName和document.querySelector打印出來的結果是一樣的

但是當使用API是。$refs獲得的DOM就報錯：請問是需要在ts項目中添加什么ts相關的配置嗎？

Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.

Property 'getBoundingClientRect' does not exist on type 'Vue'.

any

let el = this.$refs.refsName

console.log('el:', el);

let element = document.querySelector('.content-box')

console.log('element:', el);

console.log(element['style'].width)

// 1.element 調用API正常

console.log(window.getComputedStyle(element).width)

console.log(element.getBoundingClientRect())

// 2.el 調用報錯

// Property 'getBoundingClientRect' does not exist on type 'Vue | Element | Vue[] | Element[]'.Property 'getBoundingClientRect' does not exist on type 'Vue'.any

// console.log(el.getBoundingClientRect())

// console.log(window.getComputedStyle(el).width)

知道了，要把let el = this.$refs.refsName改為：let el: any = this.$refs.refsName，定義一個類型

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的this ts 方法获取_vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。