使用css伪类制作tab切换组件的底部样式

染指悲剧

于 2023-03-16 16:30:55 发布

阅读量258

点赞数

文章标签： css 前端 vue.js

本文链接：https://blog.csdn.net/qq_43039004/article/details/129590739

版权

<template>
  <div class="tab">
    <div class="item" v-for="(item,index) in tabList"
      :class="index == actIndexpage?'act':''" @click="tabClick(index)" :key="index">
        <span>{{item.name}}</span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      actIndexpage:0,
    }
  },
  props:{
    tabList:{
      type:Array
    },
    showBadge:{
      type:Boolean,
      default:false
    },
    actIndex:{
      type:[Number,String],
      default:0
    }
  },
  mounted(){
    this.actIndexpage = JSON.parse(JSON.stringify(this.actIndex))
  },
  methods: {
    tabClick(index){
      this.actIndexpage = index
      this.$emit('tabClick',index)
    }
  }
}
</script>

<style lang="less" scoped>
.tab {
  display: flex;
  background-color: #fff;
  padding: 13px 5px;
  margin: 10px 0;
  .item{
    margin-left: 15px;
    font-size: 14px;
    width: 80px;
    text-align: center;
    color: #999999;
    cursor: pointer;
  }
  .act{
    color: #262626;
    position: relative;
    font-weight: 500;
  }
  .act::after{
    content: '';
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background-color: #FFD44A;
    position: absolute;
    bottom: -15px;
    left: 30px;
  }
}
</style>

在这里插入图片描述