解决vue项目获取dom元素宽高总是不准确问题


Posted in Javascript onJuly 29, 2020

dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确:

this.$refs.editor[0].offsetHeight;

原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕;

解决方法:利用Vue.nectTick(callback)

this.$nextTick(() => {
 this.$refs.editor[0].offsetHeight;
})

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调

补充知识:vue 获取 指定元素的高度宽度等(使用vue中的 ref 获取到的是 dom 元素高度或者宽度)

使用 vue 的时候,想要获得一个指定的元素的高度时,可以使用 vue 中的 ref 。

当 ref 加在普通的元素上,使用 this.ref.name 获取到的是 dom 元素

示例

写在 页面 html 部分的

<div ref="init"></div>

写在 页面 方法 部分

这里的 offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

let height= this.$refs.init.$el.offsetHeight;

这里的offsetHeight可以替换,用来获取其他的属性

offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)

clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)

style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同

scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同

除此之外,还可以获取带有单位的数值

let height = window.getComputedStyle(this.$refs.init).height;

这样获取的值是有单位的。

以上这篇解决vue项目获取dom元素宽高总是不准确问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 #Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 #Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php实现的短网址算法分享
2014/06/20 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Python实现将xml导入至excel
2015/11/20 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
离婚民事起诉状
2015/08/03 职场文书