序文
最近、プログラマーが友達と一緒にお金を稼ぐプロジェクトに取り組みました。UIを見つけてインターフェースを作成しました。このアートガールは声が良く、ロイヤルシスタータイプです。大好きです。このアートガールは、私がバックエンドで作業していることをおそらく知らなかったでしょうし、フロントエンドはあまりプロフェッショナルではありませんでした。彼女は私がこの効果を達成できるかどうか尋ねず、インターフェースを完成させました。私！質問を公開するインターフェースについて書いたときにステップバーがあります。書いてみました。基本的にはこれを意味しますが、完璧ではないと思います。それでは、準備ができているかどうかを怠惰に確認したいと思います。コンポーネントを作成しました。スタイルが一致しないか、写真で実現されているブログ投稿をいくつか作成しました。制限が大きすぎるため、このVUEプラグインを作成します。下の写真をご覧ください！
シンプルステップバーについて
特徴
- ステップバー全体の背景色の設定をサポート
- 進行中の色の設定をサポート
- 進行中/進行中でないフォントの色を変更するためのサポート
- ステップバーの幅と高さを変更するためのサポート
- 親コンポーネントをサポートして、現在のステップを変更します
- 境界線の色を変更するためのサポート
- 動的拡張ステップアイテムをサポート
- px / remユニットをサポート
パラメータ
- totalWidth：ステップバーの全幅（数値タイプ）
- totalHeight：ステップバーの全高（数値タイプ）
- itemWidth：ステップアイテムの幅（数値タイプ）
- 単位：単位、サポートピクセル、レム（文字列型）
- stepList：ステップコンテンツ（配列タイプ）
- currentStep：現在のステップ（数値タイプ）
- lienWidth：線幅（数値タイプ）
- lienColor：線の色（文字列タイプ）
- stepBackground：ステップバーの背景色（文字列タイプ）
- stepBorderColor：ステップバーの境界線の色（文字列タイプ）
- processingFontColor：進行中のフォントの色（文字列型）
- processingFontColorN：フォントの色なし（文字列型）
- processingBackground：進行中の背景色（文字列タイプ）
予防
- このプラグインにはsass環境が必要であり、プラグインではscss構文が使用されます
- そのとき、ピクセルを単位として使用するのはlienWidth 1 2が適切であり、単位がremの場合、lienWidthは0.10.2が適切です。
プラグインの使用
1.simple-step-barプラグインをインストールします
npm i simple-step-bar
2.Main.jsスタートアップファイルマウントsimple-step-barプラグイン
import simpleStepBar from 'simple-step-bar'
Vue.use(simpleStepBar);
3.vueで使用する
<simple-step-bar></simple-step-bar>
4.開始
最後に書く
このプラグインはgiteeプラットフォームsimple-step-barでホストされ、npmリポジトリにアップロードされますsimple-step-bar
simple-step-bar-demo：デモ用
simple-step-bar：プラグインソースコード
スターをタップする皆さんを歓迎します