步驟條與Tab欄的聯動 不要錯過

2021-10-25 15:24:35 字數 1301 閱讀 1607

:space

="200"

:active

="activeindex - 0"

finish-status

="success"

align-center

>

title

="基本資訊"

>

el-step

>

title

="商品引數"

>

el-step

>

title

="商品屬性"

>

el-step

>

title

="商品"

>

el-step

>

title

="商品內容"

>

el-step

>

title

="完成"

>

el-step

>

el-steps

>

v-model

="activeindex"

:tab-position="

'left'

"style

="height

: 200px

" >

label

="基本資訊"

name

="0"

>

基本資訊el-tab-pane

>

label

="商品引數"

name

="1"

>

商品引數el-tab-pane

>

label

="商品屬性"

name

="2"

>

商品屬性el-tab-pane

>

label

="商品"

name

="3"

>

商品el-tab-pane

>

label

="商品內容"

name

="4"

>

商品內容el-tab-pane

>

el-tabs

>

export

default},

created()

, methods:,}

<

/script>

能套用的tab欄切換

效果 在style.js檔案裡封裝了乙個show函式,有4個引數,di 當前點選的按鈕 num 按鈕個數,也可以說是下面具體內容個數 divn 乙個id字首,這個例子裡是ta,active 當前按鈕的類名,可控制不同於其他按鈕的個性樣式 按鈕有不同id,第乙個叫ta0,第二個ta1.滑鼠劃入時觸發s...

React中tab欄的實現

父元件的 展示 constructor props render this state 通過解構,下面直接拿到資料 return this.itemclick index titles 子元件 itemclick index this state const titles name console....

純js實現tab欄的切換

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title tab ul li current item style head tab tab list current 商品介紹...