电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

解決vue項目獲取dom元素寬高總是不準(zhǔn)確問題

瀏覽:117日期:2022-12-24 09:14:15

dom元素內(nèi)部內(nèi)容是動態(tài)的,重置數(shù)據(jù)后直接獲取寬高總是不準(zhǔn)確:

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

原因:重置數(shù)據(jù)后獲取dom元素寬高時,dom元素還未渲染完畢;

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

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

Vue.nectTick() 是在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)

補(bǔ)充知識:vue 獲取 指定元素的高度寬度等(使用vue中的 ref 獲取到的是 dom 元素高度或者寬度)

使用 vue 的時候,想要獲得一個指定的元素的高度時,可以使用 vue 中的 ref 。

當(dāng) ref 加在普通的元素上,使用 this.ref.name 獲取到的是 dom 元素

示例

寫在 頁面 html 部分的

<div ref='init'></div>

寫在 頁面 方法 部分

這里的 offsetHeight 是返回元素的寬度(包括元素寬度、內(nèi)邊距和邊框,不包括外邊距)

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

這里的offsetHeight可以替換,用來獲取其他的屬性

offsetWidth //返回元素的寬度(包括元素寬度、內(nèi)邊距和邊框,不包括外邊距)

offsetHeight //返回元素的高度(包括元素高度、內(nèi)邊距和邊框,不包括外邊距)

clientWidth //返回元素的寬度(包括元素寬度、內(nèi)邊距,不包括邊框和外邊距)

clientHeight //返回元素的高度(包括元素高度、內(nèi)邊距,不包括邊框和外邊距)

style.width //返回元素的寬度(包括元素寬度,不包括內(nèi)邊距、邊框和外邊距)

style.height //返回元素的高度(包括元素高度,不包括內(nèi)邊距、邊框和外邊距)

scrollWidth //返回元素的寬度(包括元素寬度、內(nèi)邊距和溢出尺寸,不包括邊框和外邊距),無溢出的情況,與clientWidth相同

scrollHeigh //返回元素的高度(包括元素高度、內(nèi)邊距和溢出尺寸,不包括邊框和外邊距),無溢出的情況,與clientHeight相同

除此之外,還可以獲取帶有單位的數(shù)值

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

這樣獲取的值是有單位的。

以上這篇解決vue項目獲取dom元素寬高總是不準(zhǔn)確問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 专业深孔加工_东莞深孔钻加工_东莞深孔钻_东莞深孔加工_模具深孔钻加工厂-东莞市超耀实业有限公司 | 铝合金电阻-无源谐波滤波器-上海稳达电讯设备厂 | Trimos测长机_测高仪_TESA_mahr,WYLER水平仪,PWB对刀仪-德瑞华测量技术(苏州)有限公司 | 武汉刮刮奖_刮刮卡印刷厂_为企业提供门票印刷_武汉合格证印刷_现金劵代金券印刷制作 - 武汉泽雅印刷有限公司 | 信阳市建筑勘察设计研究院有限公司| 派财经_聚焦数字经济内容服务平台 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 银川美容培训-美睫美甲培训-彩妆纹绣培训-新娘化妆-学化妆-宁夏倍莱妮职业技能培训学校有限公司 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 气动隔膜泵厂家-温州永嘉定远泵阀有限公司| 哈尔滨发电机,黑龙江柴油发电机组-北方星光| 万师讲师网-优质讲师培训师供应商,讲师认证,找讲师来万师 | 矿用履带式平板车|探水钻机|气动架柱式钻机|架柱式液压回转钻机|履带式钻机-启睿探水钻机厂家 | 深圳展厅设计_企业展馆设计_展厅设计公司_数字展厅设计_深圳百艺堂 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 水厂自动化|污水处理中控系统|水利信息化|智慧水务|智慧农业-山东德艾自动化科技有限公司 | 外贸资讯网 - 洞悉全球贸易,把握市场先机| 石英砂矿石色选机_履带辣椒色选机_X光异物检测机-合肥幼狮光电科技 | 北京网站建设公司_北京网站制作公司_北京网站设计公司-北京爱品特网站建站公司 | 空气能暖气片,暖气片厂家,山东暖气片,临沂暖气片-临沂永超暖通设备有限公司 | 上海软件开发-上海软件公司-软件外包-企业软件定制开发公司-咏熠科技 | 数码听觉统合训练系统-儿童感觉-早期言语评估与训练系统-北京鑫泰盛世科技发展有限公司 | 喷码机,激光喷码打码机,鸡蛋打码机,手持打码机,自动喷码机,一物一码防伪溯源-恒欣瑞达有限公司 | 七维官网-水性工业漆_轨道交通涂料_钢结构漆 | 钢衬四氟管道_钢衬四氟直管_聚四氟乙烯衬里管件_聚四氟乙烯衬里管道-沧州汇霖管道科技有限公司 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 印刷人才网 印刷、包装、造纸,中国80%的印刷企业人才招聘选印刷人才网! | 车件|铜件|车削件|车床加工|五金冲压件-PIN针,精密车件定制专业厂商【东莞品晔】 | 杭州中央空调维修_冷却塔/新风机柜/热水器/锅炉除垢清洗_除垢剂_风机盘管_冷凝器清洗-杭州亿诺能源有限公司 | 老城街小面官网_正宗重庆小面加盟技术培训_特色面馆加盟|牛肉拉面|招商加盟代理费用多少钱 | 洁净实验室工程-成都手术室净化-无尘车间装修-四川华锐净化公司-洁净室专业厂家 | 北京易通慧公司从事北京网站优化,北京网络推广、网站建设一站式服务商-北京网站优化公司 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | 中式装修设计_全屋定制家具_实木仿古门窗花格厂家-喜迎门 | 橡胶电子拉力机-塑料-微电脑电子拉力试验机厂家-江苏天源 | 广州迈驰新GMP兽药包装机首页_药品包装机_中药散剂包装机 | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | 【MBA备考网】-2024年工商管理硕士MBA院校/报考条件/培训/考试科目/提前面试/考试/学费-MBA备考网 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 手持式线材张力计-套帽式风量罩-深圳市欧亚精密仪器有限公司 |