イエネル/ October 13, 2019/ Home, Others

こんにちは、VUEJSに対して初めての記事を書いてます。初めの記事で一緒にサードパーティプラグイン使わずにプロセスバー作りましょう。

ステップ１：VUEJSのテンプレート作ります。

<template>
  <div>
    <h2>ProgressBar animation</h2>
    <button type="button" v-on:click="animateProgressBar">
      Animate ProgressBar
    </button>
    <div>
      <div class="ProgressBar" v-bind:style="{width: processStatus + '%'}"></div>
    </div>
  </div>
</template>

ステップ２：ボタンのonclickイベント

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data: function () {
    return {
      processStatus: 0,
      steps: 5, // Increment process step by 5
      timePerRow: 500, // Half of second
      intervalId: null
    }
  },
  methods: {
    /**
     * ProgressBar animation
     */
    animateProgressBar () {
      this.intervalId = setInterval(() => {
        if (this.processStatus > 99) {
          clearInterval(this.intervalId)
        }
        this.processStatus = Math.min(this.processStatus + this.steps, 100)
      }, this.timePerRow)
    }
  }
}
</script>

ステップ３：CSS

<style scoped>
.ProgressBar{
  background-color: dodgerblue;
}
</style>

上記のVUEJSコード説明します。

Animate ProgressBar　と呼ぶボタンをクリックするとanimateProgressBarメソッドを実行します、このメソッドはただのJavascriptスレッドです、0.5秒ごとに再実行します、毎回実行するとprocessStatusにstepsで設定した数字を足します。

次はv-bind:style=”{width: processStatus + ‘%’}”このprocessStatusを見て、そこに書いてある数字をスタイルに入れます。実際動かすとプロセスバーのスタイルは下記の方に変わります。

style="width:5%"
0.5秒後　style="width:5%"
0.5秒後　style="width:10%"　...

スレッドの中にあるIF文書でプロセスバーは100%になってるかどうか確認します。プロセスは100%になったら IF分の中のコード実行してclearInterval(this.intervalId)　スレッドを完了する。

ソースコードの全部です。

<template>
  <div>
    <h2>ProgressBar animation</h2>
    <button type="button" v-on:click="animateProgressBar">
      Animate ProgressBar
    </button>
    <div>
      <div class="ProgressBar" v-bind:style="{width: processStatus + '%'}"></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'app',
  data: function () {
    return {
      processStatus: 0,
      steps: 5, // Increment process step by 5
      timePerRow: 500, // Half of second
      intervalId: null
    }
  },
  methods: {
    /**
     * ProgressBar animation
     */
    animateProgressBar () {
      this.intervalId = setInterval(() => {
        if (this.processStatus > 99) {
          clearInterval(this.intervalId)
        }
        this.processStatus = Math.min(this.processStatus + this.steps, 100)
      }, this.timePerRow)
    }
  }
}
</script>
<style scoped>
.ProgressBar{
  background-color: dodgerblue;
}
</style>

次のポストまで。

Share this Post