如何在Vue中獲取DOM元素的實際寬高
前言
最近使用 D3.js 開發(fā)可視化圖表，因為移動端做了 rem 適配，所以需要動態(tài)計算獲取圖表容器的寬高，其中涉及到一些原生DOM API的使用，避免遺忘這里總結(jié)一下。
一、獲取元素
在 Vue 中可以使用 ref 來獲取一個真實的 DOM 元素。
為了保險起見，所有的 DOM 操作建議都放在 $nextTick() 方法中。
<template>
<div class="box" ref="wrap"></div>
</template>
<script>
export default {
mounted() {
// 獲取 DOM 元素
this.$nextTick(()=>{
let $ele = this.$refs.wrap
})
},
}
</script>
<style scoped>
.box {
width: 100%;
height: 200px;
background-color: pink;
}
</style>
二、獲取元素寬高
使用 offsetWidth 、 offsetHeight 方法，返回 Number 類型的值，如：52。
let $ele = this.$refs.wrap // 寬 let width = $ele.offsetWidth // 高 let height = $ele.offsetHeight
使用 window 全局對象中的 getComputedStyle API，返回 String 類型的值，包含px單位，如： '100px'。
let $ele = this.$refs.wrap // 寬 let width = window.getComputedStyle($ele).width // 高 let height = window.getComputedStyle($ele).height
補充：vue項目獲取dom元素寬高總是不準(zhǔn)確
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)
總結(jié)
到此這篇關(guān)于如何在Vue中獲取DOM元素實際寬高的文章就介紹到這了,更多相關(guān)Vue獲取DOM元素實際寬高內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Element el-button 按鈕組件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
vue3如何實現(xiàn)表格內(nèi)容無縫滾動(又寫了一堆冗余代碼)
這篇文章主要給大家介紹了關(guān)于vue3如何實現(xiàn)表格內(nèi)容無縫滾動的相關(guān)資料,在Vue3項目中難免會遇到讓列表滾動的需求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
深入淺析Vue.js中 computed和methods不同機制
這篇文章給大家介紹了Vue.js中 computed和methods不同機制，在vue.js中，methods和computed兩種方式來動態(tài)當(dāng)作方法使用，文中還給大家提到了computed和methods的區(qū)別，感興趣的朋友一起看看吧2018-03-03
VueAwesomeSwiper在VUE中的使用以及遇到的一些問題
這篇文章主要介紹了VueAwesomeSwiper在VUE中的使用以及遇到的一些問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了解決vue的component標(biāo)簽渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易折疊面板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了在vue中使用echarts實現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
為什么Vue3.0使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽(defineProperty表示不背這個鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽？defineProperty表示不背這個鍋，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vue項目中導(dǎo)入swiper插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01