Vue.jsでライブラリを使わずに進捗バーの表示する方法

Vue.js

Vue.jsでライブラリを使わずに進捗バーの表示するシンプルな方法です。
基本はJavaScriptのため、考え方は他のフレームワークでも生のJavaScriptでも同じです。

Vue.jsで進捗バーの表示する方法

ポイント

  • 進捗を管理するためのクラスを作る
  • 動的にしたいので、:styleを使う。
  • クラスが100%になったらそれ以上増えないようにv-ifを設定する
  • 進捗はパーセントで管理したいので初期値は0で設定する
  • メソッドは次へなどのボタンが押されたら発火するようにする
  • 計算方法は100をデータのlengthで割ったものを変数に足していく

コード例

template

<!-- 進捗表示 -->
<div class="step-progress" :style="('width: ' + progress + '%')"></div>


<!-- 進捗が100％になったら非表示にする -->
<div class="box-button" v-if="progress < 100">
<button @click="nextQuestion" :class="isQuestionAnswered ? 'selectable': ''">>次へ</button>
</div>

まず、進捗を動的にスタイルを適用したいので、v-bindでstyle属性を付与します。
そして、メソッドを作成して、そのメソッドを発火したら0％から100％へと変化していくようにします。
ただし、メソッドは基本的に足し算のため100％を超えてしまうので、メソッドで調整するか上のようにv-ifで100以上になったらメソッドを発火するボタン自体を消します。

data()

progress: 0, // 進捗のカウント

初期値は0％の0としておきます。

methods

nextQuestion() {
// 進捗状況を進める
// 質問4つなら100 / 4 = 25、を0,25,50,75,100と足していけばいい
this.progress= this.progress + (100/this.questions.length)
},

lengthを使うことで、データのトータルの数で100%を割ります。
変数にどんどん足していくことで進捗の％を進めることができます。
それにcssを適用すれば進捗表示を表現することができます。

css

.step-progress {
  display: flex;
  width: 100%;
  height: 5px;
  background-color: #00416a;
  transition: 0.5s;
}

:classと:styleの違いについては【Vue.js】:classと:styleについてを参考にしてみてください。

Vue.js

Posted by devsakaso