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

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

原因：重置數(shù)據(jù)后獲取dom元素寬高時(shí)，dom元素還未渲染完畢；

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

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

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

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

使用 vue 的時(shí)候，想要獲得一個(gè)指定的元素的高度時(shí)，可以使用 vue 中的 ref 。

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

示例

寫在 頁(yè)面 html 部分的

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

寫在 頁(yè)面 方法 部分

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

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

這里的offsetHeight可以替換，用來(lái)獲取其他的屬性

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

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

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

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

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

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

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

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

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

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

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

以上這篇解決vue項(xiàng)目獲取dom元素寬高總是不準(zhǔn)確問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論