vuejsでプラグインなしでプロセスバー作ろう

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

こんにちは、VUEJSに対して初めての記事を書いてます。初めの記事で一緒にサードパーティプラグイン使わずにプロセスバー作りましょう。 ステップ1:VUEJSのテンプレート作ります。 ステップ2:ボタンのonclickイベント ステップ3:CSS 上記のVUEJSコード説明します。 Animate ProgressBar と呼ぶボタンをクリックするとanimateProgressBarメソッドを実行します、このメソッドはただのJavascriptスレッドです、0.5秒ごとに再実行します、毎回実行するとprocessStatusにstepsで設定した数字を足します。 次はv-bind:style=”{width: processStatus + ‘%’}”このprocessStatusを見て、そこに書いてある数字をスタイルに入れます。実際動かすとプロセスバーのスタイルは下記の方に変わります。 スレッドの中にあるIF文書でプロセスバーは100%になってるかどうか確認します。プロセスは100%になったら IF分の中のコード実行してclearInterval(this.intervalId) スレッドを完了する。 ソースコードの全部です。 次のポストまで。

Kravmaga

イエネル/ September 14, 2019/ Kravmaga/ 0 comments

This is me… I was main action figure 🙂 (Bad one of course) of all those shots… This is my studio