this ts 方法获取_vue+typescript项目中用this.$refs和原生方法获取的dom有什么区别

项目中使用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,定义一个类型

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值