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，定义一个类型

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

【Android 性能优化】应用启动优化 ( 方法追踪代码模板 | 示例项目 | SD 卡访问权限 | 示例代码 | 获取 Trace 文件 | Android Studio 查看文件)
文章目录一. 方法追踪代码模板二. 追踪 Launch 页面的 onCreate 方法执行情况 1. 示例项目 2. SD 卡访问权限问题 ( 动态权限申请 ) 3. MainActivity o ...
华为交换机关机方法_华为交换机常用的三种vlan划分方法~
点击"华为考试HCIE俱乐部"→点击右上角"..."→"设为星标" 资讯丨干货丨入群联系小E微信:SPOTO123456 作为华为设 ...
在项目中用ts封装axios
写在前面虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就 ...
cli3解决 ie11语法错误 vue_使用 VueCLI 3.x 快速搭建Vue + TS + Kbone + KboneUI + 云开发项目...
Vue CLI:一个基于 Vue.js 进行快速开发的完整系统.TS:TypeScript,一种由微软开发的开源.跨平台的编程语言.它是JavaScript 的超集,最终会被编译为 JavaScrip ...
基于 Vue 和 TS 的 Web 移动端项目实战心得
关注程序员成长指北,回复"1" 加入我们一起学习,天天进步作者:mcuking(杭州个推) 来源:https://juejin.im/post/5d759f706fb9a06a ...
vue3使用vite+setup+ts写一个初级前端项目
Vue3vite+setup+ts项目总结项目说明项目概述本项目纯粹是为了学习和巩固刚学的vue3组合式api和语法糖,再加上网上流行vite+ts+vue,所以便有了这个历时四天的vue3前端 ...
vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...
typescript项目_如何设置TypeScript项目
typescript项目 by David Piepgrass 由David Piepgrass 如何设置TypeScript项目 (How to set up a TypeScript projec ...
最详细从零开始配置 TypeScript 项目的教程
点击上方"逆锋起笔",公众号回复 PDF 领取大佬们推荐的学习资料关于作者本文出自于掘金的子弈[1],感谢桃翁整理,原文链接从零开始配置 TypeScript 项目[2].以 ...

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

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

最新文章

热门文章