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

您的位置:首頁技術文章
文章詳情頁

解決vue項目獲取dom元素寬高總是不準確問題

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

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元素寬高總是不準確問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 仿清水混凝土_清水混凝土装修_施工_修饰_保护剂_修补_清水混凝土修复-德州忠岭建筑装饰工程 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 通信天线厂家_室分八木天线_对数周期天线_天线加工厂_林创天线源头厂家 | 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 福州时代广告制作装饰有限公司-福州广告公司广告牌制作,福州展厅文化墙广告设计, | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 高防护蠕动泵-多通道灌装系统-高防护蠕动泵-www.bjhuiyufluid.com慧宇伟业(北京)流体设备有限公司 | 大型低温冷却液循环泵-低温水槽冷阱「厂家品牌」京华仪器_京华仪器 | 杭州双螺杆挤出机-百科| 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 东莞工作服_东莞工作服定制_工衣订做_东莞厂服 | 首页|专注深圳注册公司,代理记账报税,注册商标代理,工商变更,企业400电话等企业一站式服务-慧用心 | 线材成型机,线材折弯机,线材成型机厂家,贝朗自动化设备有限公司1 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | PC阳光板-PC耐力板-阳光板雨棚-耐力板雨棚,厂家定制[优尼科板材] | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 砍排机-锯骨机-冻肉切丁机-熟肉切片机-预制菜生产线一站式服务厂商 - 广州市祥九瑞盈机械设备有限公司 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 众能联合-提供高空车_升降机_吊车_挖机等一站工程设备租赁 | 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 单柱拉力机-橡胶冲片机-哑铃裁刀-江都轩宇试验机械厂 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 一体化污水处理设备_生活污水处理设备_全自动加药装置厂家-明基环保 | 高压负荷开关-苏州雷尔沃电器有限公司 | 智成电子深圳tdk一级代理-提供TDK电容电感贴片蜂鸣器磁芯lambda电源代理经销,TDK代理商有哪些TDK一级代理商排名查询。-深圳tdk一级代理 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 防伪溯源|防窜货|微信二维码营销|兆信_行业内领先的防伪防窜货数字化营销解决方案供应商 | 常州翔天实验仪器厂-恒温振荡器-台式恒温振荡器-微量血液离心机 恒温恒湿箱(药品/保健品/食品/半导体/细菌)-兰贝石(北京)科技有限公司 | 长信科技产业园官网_西安厂房_陕西标准工业厂房| PC阳光板-PC耐力板-阳光板雨棚-耐力板雨棚,厂家定制[优尼科板材] | 餐饮加盟网_特色餐饮连锁加盟店-餐饮加盟官网 | 耐酸碱胶管_耐腐蚀软管总成_化学品输送软管_漯河利通液压科技耐油耐磨喷砂软管|耐腐蚀化学软管 | 在线PH计-氧化锆分析仪-在线浊度仪-在线溶氧仪- 无锡朝达 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 超声波清洗机_大型超声波清洗机_工业超声波清洗设备-洁盟清洗设备 | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 杭州|上海贴标机-百科 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 |