showIndexBtn.vue

<template>
  <el-row>
    <el-col :span="4">
      &nbsp;
      <!-- <a style="color: #409EFF;text-decoration: underline;cursor: pointer;" @click="defaltConfig">恢复默认设置</a> -->
    </el-col>
    <el-col :span="6" :offset='14'>
      <div class="btn-box" v-if="!($Project=='store'&&belongToType=='NewMall')">
        <el-button size="mini" :class="item.val==showIndex?'activeBtn':''" @click='getBtnIndex(item.val)' v-for="(item,index) in btnData" :key="index" >{{item.name}}</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        btnData:[],
        // showIndex:1
      }
    },
    props: {
      belongToType: String,
      showIndex:{
        default:1
      }
    },
    mounted() {
      this.getBtnName()
    },
    watch:{
      belongToType:{
        handler (newVal,oldVal){
          this.getBtnName()
        },
        immediate:true,
        deep:true
      },
      showIndex:{
        handler (newVal,oldVal){

        },
        immediate:true,
        deep:true
      }
    },
    methods: {
      defaltConfig(){
        alert("恢复默认设置")
      },
      getBtnIndex(val){
        // this.showIndex = val
        this.$emit('getShowIndex', val)
      },
      getBtnName(){
        if(this.belongToType=='NewMall'){
          this.btnData=[{
            name:'客流统计',
            val:'1'
          },{
            name:'客群画像',
            val:'2'
          }]
        }else{
          this.btnData=[{
            name:'汇总',
            val:'1'
          },{
            name:'详情',
            val:'2'
          }]
        }
      }
    }

  }
</script>

<style scoped="scoped" lang="less">
  .btn-box{
    text-align: right;
    margin-bottom: 15px;
    margin-right: 15px;
    /deep/.activeBtn{
      background-color: #409EFF !important;
      color: #fff;
    }
    /deep/.el-button{
      margin-left: 10px;
    }
  }
</style>