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>

可直接复制代码看效果,如有任何疑问,欢迎屏幕下方留言...