Vue動(dòng)態(tài)獲取width的方法
vue里想用Bootstrap的進(jìn)度條,
<div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span class="sr-only">20%</span> </div> </div>
主要是把style="width: 20%;"變成動(dòng)態(tài)獲取的。
:style="'width:' + percent + '%'"
這樣寫就好了。
也可是這樣:
用vue 獲取動(dòng)態(tài)元素的寬度。首頁,要放在this.$nextTick里面,其實(shí)要使用$el掛載此元素,下面貼代碼吧:
<el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"></el-input>
先定義一個(gè)ref=companyStyle,我們來獲取此元素的寬度,
newAddBtn(){ let me = this; this.$nextTick(function () { me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px'; })
這樣我們就獲取到了這個(gè)元素的寬度了。
以上這篇Vue動(dòng)態(tài)獲取width的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目百度地圖如何自定義標(biāo)注marker
這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07