Vue動的にwidthを取得する方法

1123 ワード

vueではBootstrapの進捗書を使いたいです。

<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%」です。動的に取得するようになります。

:style="'width:' + percent + '%'"
このように書けばいいです。
そうです
Vueで動的要素の幅を取得します。トップページは、this.$nextTickに入れます。実は$lを使ってこの元素をマウントします。コードを貼りましょう。

<el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"></el-input>
まずref=companyStyleを定義して、この要素の幅を取得します。

newAddBtn(){
 let me = this;
 this.$nextTick(function () {
  me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px';
 
 })
このようにして、この要素の幅を取得しました。
以上のこのVue動態はwidthの方法を獲得しました。小編集は皆さんに全部の内容を共有しました。参考にしてもらいたいです。どうぞよろしくお願いします。