---
nav: default
---
### ButtonTab
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fbutton-tab"/>
<a href="demo/#/component/button-tab" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/button-tab</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/button-tab" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <button-tab>
      <button-tab-item>Today</button-tab-item>
      <button-tab-item selected>
        This Week
      </button-tab-item>
      <button-tab-item>This Month</button-tab-item>
    </button-tab>
    <br>
    <button-tab>
      <button-tab-item selected>
        文章订阅
      </button-tab-item>
      <button-tab-item>商品订阅</button-tab-item>
    </button-tab>
    <br>
    <button-tab v-model="demo01">
      <button-tab-item @on-item-click="consoleIndex">
        文章同步
      </button-tab-item>
      <button-tab-item @on-item-click="consoleIndex">
        商品同步
      </button-tab-item>
    </button-tab>
    <br>
    <divider>Red Dot</divider>
    <button-tab>
      <button-tab-item selected>
        All Message
      </button-tab-item>
      <button-tab-item><span class="vux-reddot-s">New Message</span></button-tab-item>
    </button-tab>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Divider } from '../components/_index'

export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider
  },
  data () {
    return {
      demo01: 0
    }
  },
  methods: {
    consoleIndex () {
      console.log('click demo01')
    }
  }
}
</script>

```

#### Github Issue