ホームページ  >  記事  >  ウェブフロントエンド  >  Progressbar コンポーネントの実践的な事例分析

Progressbar コンポーネントの実践的な事例分析

php中世界最好的语言
php中世界最好的语言オリジナル
2018-06-07 15:03:231603ブラウズ

今回はプログレスバーコンポーネントの実践事例をお届けします。プログレスバーコンポーネントを実際に使用する際の注意点は何ですか?

レンダリング

まず、以下に示すように、プログレスバーコンポーネントの効果を見てみましょう

プログレスバーコンポーネント

実装プロセス

◾プロジェクトの構築

プログレスバーコンポーネントは実行できますnpm パッケージは Yeoman を介してビルドされ、Gulp+Webpack を介してツールがビルドされます。各フォルダーの内容は前の記事と同じです

◾プログレスバーソースファイルテンプレート

プログレスバーコンポーネントは.vueファイルの形式であり、テンプレート部分は次のとおりです

プログレスバーソースファイルテンプレート部分

主にプログレスバーコンポーネントを分析できますこれらの属性があります:

  1. type、警告、危険、成功、情報などの制御に型変数を使用します。

  2. が動的かどうかを制御するには、アニメーション変数を使用します。値変数を使用して制御;

  3. 最大値、最大変数制御を使用;

  4. パーセント変数によって制御され、値と最大値によって計算されます。 valueText 値によって制御される、表示されるパーセント値は、Vue の計算属性です

  5. ◾ プログレスバーのソースファイルのスクリプト

  6. プログレスバーコンポーネントのスクリプト部分
◾ プログレスバーコンポーネントのスタイル

スタイル部分には多くのコンテンツがあります。まず、プログレスバー部分とプログレスバー部分を含む基本的な CSS 属性を見てみましょう

次に、さまざまな CSS スタイルを見てみましょう。色

色を表す CSS スタイル

最後に、アニメーション効果を表す CSS スタイルを見てみましょう

アニメーション効果の CSS スタイル

◾ 例

上記の手順を完了すると、次の手順を完了できます。次に、プログレスバー コンポーネントの使用方法を見てみましょう。実行できる場合は、記事の「効果」の冒頭をご覧ください。

プログレスバーコンポーネントの使用

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

base64を暗号化および復号する方法

JSを使用して過去7日間と過去3日間を取得する方法

以上がProgressbar コンポーネントの実践的な事例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。