Vue 中做一个有选中效果的Tab标签栏

最新推荐文章于 2023-11-08 09:07:31 发布

歹戏拖棚

最新推荐文章于 2023-11-08 09:07:31 发布

阅读量673

点赞数

文章标签： vue.js javascript css css3 html5

本文链接：https://blog.csdn.net/weixin_43837796/article/details/106927125

版权

工作需要做了一个tab标签栏记录一下
下面是代码

HTML

<!--Tab标签栏-->
        <div class="mainTabA">
          <div class="tabOption" v-for="(item,index) in tuijianList" :key="index" @click="changeActive(index)"  :class="{activeTab : item.isActive}" >
            <p>{{item.nm}}</p>
            <p>{{item.cm}}</p>
          </div>
        </div>

Js

写在data()里的

tuijianList:[{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        },{
          nm:'',
          cm:'',
          isActive: false,
        }],

    methods:{
      changeActive(index){
      //遍历数组，将已经选中项的布尔值置否
        this.tuijianList.forEach(item =>{
          if(item.isActive === true){
            item.isActive = false
          }else{
          }
        });
        this.tuijianList[index].isActive = true;
      }
    }

css

懒得删了就全拿上来了

    //导航栏
    .mainTabA{
      display: flex;
      width: 100%;
      margin-top: 30px;
      height: 93px;
      background-color: #FFFFFF;
      justify-content: space-around;
      .tabOption{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 148px;
        border-right: 1px solid;
        border-image: -webkit-linear-gradient(#ffffff , rgba(213,213,213,0.6) , #ffffff)1 10 1; /* 控制边框颜色渐变 */
        border-image: -moz-linear-gradient(#ffffff , rgba(213,213,213,0.6) , #ffffff)1 10 1;
        border-image: linear-gradient(#ffffff , rgba(213,213,213,0.6) , #ffffff)1 10 1; /* 标准的必须写在最后 */
        p:nth-child(1){
          line-height: 31px;
          font-size: 16px;
          cursor: pointer;
          color: #343434;
          margin: 0 auto;
          width: 91px;
        }
        p:nth-child(2){
          line-height: 31px;
          font-size: 14px;
          color: #999999;
          cursor: pointer;
          margin: 0 auto;
          width: 91px;
        }
      }
      .activeTab{
        p:nth-child(1){
          line-height: 31px;
          font-size: 16px;
          cursor: pointer;
          color: #FFFFFF;
          background-color: #FF3E3E;
          border-radius: 15px;
        }
        p:nth-child(2){
          line-height: 31px;
          font-size: 14px;
          color: #FF3E3E;
          cursor: pointer;
        }
      }
    }