<script>
  export default {
    data() {
      return {
        activeIndex: 0,
        titleArray:[
          {name:'标签一'},
          {name:'标签二'},
          {name:'标签三'},
        ],
      }
    },
    created() {

    },
    methods: {
      change(val){
        console.log(val)
        this.activeIndex = val[1]
      }
    }
  }
</script>
<style lang="less" scoped>

</style>


# Tabs标签组件

----
<!-- 采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。 -->

### 基础用法

- 基础的Tabs用法

<div class="demo-block">
  <div>
    <h-tabs :titleArray="titleArray" @on-change="change(arguments)"></h-tabs>
    <div v-show="activeIndex === 0">标签一内容</div>
    <div v-show="activeIndex === 1">标签二内容</div>
    <div v-show="activeIndex === 2">标签三内容</div>
  </div>
</div>

:::demo





```html
<div>
  <div>
    <h-tabs :titleArray="titleArray" @on-change="change(arguments)"></h-tabs>
    <div v-show="activeIndex === 0">标签一内容</div>
    <div v-show="activeIndex === 1">标签二内容</div>
    <div v-show="activeIndex === 2">标签三内容</div>
  </div>
</div>
<script>
  export default {
    data() {
      return {
        activeIndex: '0',
        titleArray:[
          {name:'标签一'},
          {name:'标签二'},
          {name:'标签三'},
        ],
      }
    },
    created() {

    },
    methods: {
      change(val){
        console.log(val)
        this.activeIndex = val[1]
      }
    }
  }
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| titleArray       |     所有顶部标签栏     | Array  |  -     |  -  |
| activeIndex       |     顶部标签栏的索引，用来判断当前激活的标签对应显示哪个面板     | Number  |  -     |  0  |




### Events
| 事件名         | 说明             | 返回值                       |
| -------------- | ---------------- | ---------------------------- |
| @on-change | 切换顶部标签栏触发的事件 | 当前选中 |
