vue實現選項卡切換--不用ui庫

vue的ui庫中基本都有選項卡切換的組件,但是在項目開發過程中卻不一定能很好的為我們所用,因為里面的樣式和 一些狀態並不能很好的根據我們的項目需求進行定制.最近項目中使用的是vant-ui中的標簽頁,也就是選項卡,項目需要選項卡中的內容overFLow:auto,但是無論怎么設置,上面的選項都會跟着一起滾動,實在是頭疼的很,所以決定,自行解決吧.

效果圖:

需求分析

• 選項卡點擊切換時選項的背景顏色或字體需要變化
• 選項卡中每個選項的產品數量要根據后端返回數據進行變化
• 點擊選項時下面內容要對應發生改變
• 滾動時選項不動,只內容發生滾動

下面就直接上成品代碼

<template>
  <div class="box">
    <div class="menu-list">
      <div class="total" :class="{active:item.id === sel}" v-for="item in tabs" :key="item.id" @click="select(item)">
        {{ item.label }}
        <span>
          ({{item.id==1?num=yxf +ywg +wxz  :item.id === 2?num = yxf:item.id === 3?num = ywg:num = wxz}})
        </span>
      </div>
    </div>
    <div class="text">
      <div class="all" v-show="sel === 1">1111</div>
      <div class="all" v-show="sel === 2">222</div>
      <div class="all" v-show="sel === 3">333</div>
      <div class="all" v-show="sel === 4">444</div>
    </div>
</div>
</template>

初始化的數據:

<script>
export default {
data () {
    return {
      yxf:4,
      wxz:5,
      ywg:1,
      sel:1,
      tabs: [
        {label: '全部',num:0, id: 1},
        {label: '已下發',num: 0, id: 2},
        {label: '維修中',num: 0, id: 3},
        {label: '已完工',num:0, id: 4},
      ]
    }
  },
}
</script>

點擊事件:

methods: {
     select(item){
       this.sel = item.id;
     },
 },

定義樣式:

<style scoped>
    .equi_container {
    display: flex;
    flex-direction: column;
  }
  .menu-list {
    height: 0.44rem;
    display: flex;
  }
  .total{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*height: 100%;*/
    /*line-height: 0.44rem;*/
    background:#F4FAFF;
    color:#4c8fff;
    text-align:center;
    float:left
  }
  .total.active {
    background: #4c8fff;
    color: #FFFFFF;
  }
  .text{
    flex: 1;
    overflow: auto;
  }

</style>

可直接復制代碼看效果,如有任何疑問,歡迎屏幕下方留言...