カスタムステップVUEバーアセンブリ（CSS）

いくつかの単語の男は、直接コンポーネントのコードに、と述べました。。

<テンプレート> 
  の<div> 
    <ULクラス= "ステップ"> 
      < 李
        V - のため = "SetDataメソッドで（項目、インデックス）" 
        ：キー = "項目+指数" 
        ：クラス = "{ 'アクティブ'：手順===索引} " 
      > {{アイテム+ステップ}} </ LI> 
    </ UL> 
  </ div> 
</テンプレート> 
<スクリプトのlang = ""> TS 
からインポート{コンポーネント、プロップ、ヴュー} VUE-プロパティデコレータ" " ; 
以下からの輸入axios「axios」。
@Component 
輸出デフォルトのクラス手順ヴュー{拡張
  @Prop（{ デフォルト：0}）民間の手順を！：数;
  @Prop（）プライベートSetDataメソッド！：文字列[]; 
}
 </ SCRIPT> 

<スタイル> 
.steps { 
  位置：相対; 
  余白 - 底：30px; 
  カウンタ -reset：STEP; / * デジタルカウンタ作成するステップ*を/ 
} 
/ * ステップの説明* / 
.steps {リチウム
  リスト -style- 種類：なし; 
  フォント - サイズ：12ピクセル、
  テキスト - =左整列：センター; 
  幅： 15％; 
  位置：相対; 
  フロート：左; 
} 

/ * ステップデジタル* / 
.steps李：{の前に
  表示：ブロック; 
  内容：カウンタ（STEP）; / * カウンタの内容を設定* / 
  カウンタ -Increment：STEPを; / *は、カウンタ値をインクリメント* / 
  幅：32PXを; 
  高さ：32PX; 
  背景 -color：＃019 875 ; 
  ライン - 高：32PX; 
  ボーダー - RADIUS：32PX; 
  フォント - サイズ：16pxに; 
  色：#FFF; 
  テキスト - 左=揃える：センター; 
  フォント熱重量：700 ; 
  マージン： 0 オートオート8px; 
} 

/ * ケーブル* / 
李.steps〜は、李：{後
  ：コンテンツ "" 。
  幅： 100％; 
  高さ：2ピクセル、
  背景 -color：＃019 875 ; 
  位置：絶対; 
  左： -50％; 
  トップ：15ピクセル; 
  Z -index：-1; / * デジタルに入れ後ろ* / 
} 

/ * 緑色のステップ番号と完全なケーブル/現在の前* / 
.steps li.active:before、
.steps li.active:after { 
  背景 -color：＃019 875 ; 
} 

/ * 現在の/デジタルケーブルのステップが完了した後とグレーアウト* / 
.steps li.active〜李は：前に、
li.active .steps〜李：{後
  背景 -color：＃777 ; 
}
 </スタイル>

コンポーネントを呼び出します。。。

<テンプレート> 
  の<div> 
    {{NUM1}}
    の乱数を取得し、<EL-ボタンタイプは= "警告" @ = "はgetNumber"をクリック> </ EL-ボタン> 
    <ステップ：ステップ= "registSpets"：SetDataメソッド= "SetDataメソッド"/> 
    <EL-ボタンタイプ="一次registSpets ++」@ =をクリック""> +++ </ EL-ボタン>     {{registSpets}}
     <EL-ボタン型= "危険性" @クリック= "registSpets--" >···</ EL-ボタン> 
  </ div> 
</テンプレート> 
<スクリプトのlang = "TS"> 
インポート{コンポーネント、プロップ、ヴュー}から "VUE-プロパティデコレータ" 。
以下からのインポート手順「../components/Steps.vue」。

Vueが{入力クラスの拡張
  NUM1：番号 = 0 ; 
  registSpets = 1 ; 
  SetDataメソッド = [ "ユーザ情報"、 "レEnfantsの私たち"、 "猿の王"、 "裸足"、 "私は中国を愛し" ]; 
  はgetNumberを（）{ 
    この .num1 = Math.ceil（Math.random（）* 10）; // Matg.ceilのCEIL 
  } 
}
 </ SCRIPT>

結果は以下の通りであります：

オリジナルリファレンス：https://blog.csdn.net/xqq580231/article/details/78086173

カスタムステップVUEバーアセンブリ（CSS）

おすすめ