<template>
  <div class="box">
    <h1>索引：{{ activeIndex }}</h1>
    <!-- <lyf-tab :tabs="tabs" v-model="activeIndex"></lyf-tab> -->
    <!-- <lyf-tab :tabs="tabs1" v-model="activeIndex"></lyf-tab> -->
    <lyf-tab :tabs="tabs2" sticky v-model="activeIndex"></lyf-tab>
    <!-- <lyf-tab 
      :tabs="tabs" 
      v-model="activeIndex"
      activeColor="#fd6800"></lyf-tab> -->
    <div class="content">content</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      tabs: [],
      tabs1: [],
      tabs2: []
    }
  },
  created() {
    for (let a = 0; a < 12; a++) {
      this.tabs.push(a+1 + '标题')      
    }
    for (let a = 0; a < 3; a++) {
      this.tabs1.push(a+1 + '标题')      
    }
    for (let a = 0; a < 7; a++) {
      this.tabs2.push(a+1 + '标题')      
    }
    this.tabs[1] = this.tabs1[1] = this.tabs2[1] = '长长的标题啊'
  }
}
</script>

<style scoped>
.box {
  height: 70vh;
  overflow: auto;
  background-color: #ccc;
  border-bottom: solid 2px #000;
}
.content {
  height: 800px;
  margin: 12px;
  border: solid 2px #fd6800;
  color: #fff;
}
</style>