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についてを参考にしてみてください。