Vue は、最新のシングルページ アプリケーション (SPA) を構築するための人気のある JavaScript フレームワークです。一般的な UI コンポーネントの 1 つは進行状況バーです。 Vue のドキュメントには、このプログレス バー コンポーネントを実装するためのさまざまな方法が記載されており、そのうちの 1 つを以下に紹介します。
まず、Vue コンポーネントの このコードでは、 script mounted setInterval .progress-bar progress 以上がVueドキュメントでのプログレスバーコンポーネントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。template
で、
.progress-bar
は外側のdiv
要素のクラス名で、そのスタイル.progress を設定するために使用されます。
は、実際の進行状況バーの長さを表すために使用される内部div
要素のクラス名です。その幅は、## を使用してprogress '%'
に設定されます。 #:style属性。
progressは、進行状況バーのパーセンテージを制御するために使用されるデータ属性です。
で、プログレス バー コンポーネントの関連ロジックを定義する必要があります。まず、
dataオブジェクトで
progressデータ属性を定義します。初期値は 0 です。コードは次のとおりです:
関数は、プログレス バーの自動処理を開始します。コードは次のとおりです。
関数プログレスバーの自動更新を設定するために使用されます。 1 秒ごとに、
progressデータ属性が 10 ずつ増加し、100% に達したかどうかを確認し、100% に達した場合は、プログレス バーを 0 にリセットします。
クラスを使用して、幅を含む外側の
div 要素のスタイルを設定します。 、高さ、境界線、境界線半径;
.progress クラスは、高さ、背景色、境界線半径など、内部
div 要素のスタイルを設定するために使用されます。これらのスタイルは変更できます。実際のニーズに応じて。
データ属性と
setInterval 関数を通じて自動更新を実現できます。 。このアプローチを使用すると、アプリケーションをよりモダンでプロフェッショナルな外観にし、ユーザー エクスペリエンスを向上させることができます。