<script>
export default {
  name: "my-menu",
  props: {
    // 选择的菜单
    tab: {
      // 值类型
      type: String,
      // 默认值
      default: ''
    },
    // 菜单列表
    tabList: {
      // 值类型
      type: Array,
      // 默认值
      default: []
    },
    color:{
      type:String,
      default:'#4975fd'
    }
  },
  data() {
    return {
      oneWitdh: 50
    }
  },
  methods: {
    getWidth() {
      let length = this.$parent.tabList.length
      this.oneWitdh = parseFloat(100) / parseFloat(length)
    },
    switchTab(e) {
      this.$parent.tab = e
    }
  }

}
</script>

<template>
  <view class="flex bview" style="text-align: center" v-if="tabList && tabList.length>0">
    <view class="topTitle" :style="{'width':this.oneWitdh+'%'}" :class="tab===item.id?'topTitle-active':''"
          v-for="(item,i) in tabList" :key="i" @click="switchTab(item.id)">
      <text>{{ item.name }}</text>
      <view class="flex" :class="tab===item.id?'bottom-active':''"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.topTitle {
  font-size: 35rpx;
  transition: 0.3s;
}

/*选择的tab*/
.topTitle-active {
  font-size: 40rpx;
  color: #4975fd;
}

.bottom-active {
  margin: 0 auto;
  width: 60rpx;
  border-bottom: 6rpx solid #4975fd;
}

</style>
