没有合适的资源?快使用搜索试试~ 我知道了~
解决vue项目获取dom元素宽高总是不准确问题
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉

温馨提示
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项目获取项目获取dom元素宽高总是不准确问题元素宽高总是不准确问题
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元素宽高总是不准确问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望
大家多多支持软件开发网。

weixin_38601878
- 粉丝: 7
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 医学院校计算机专业课程体系构建的探索与实践.docx
- 开题报告项目管理系统设计.pdf
- 最新最专业的企业网站推广方案.doc
- 计算机网络课程设计说明书兰州市第九中学校园网组建方案.doc
- 网络销售实习报告1000字.docx
- 国际项目管理专业资质认证IPMP试题概论.doc
- 工业互联网体系架构.doc
- 海赋国际网络营销方案.pptx
- 组合投资风险与收益与其MATLAB实现.doc
- GOSP-硬件开发资源
- 嵌入式系统期末考试试卷.doc
- 软件学院软件工程领域代码.doc
- 基于Android手机蓝牙控制的智能小车设计.doc
- 电子商务公司的口号.doc
- 网络营销战略计划.pptx
- 三菱FX2N系列PLC.ppt
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制

- 1
- 2
前往页