Tabs

Tabs

选项卡。

引入

import { Tabs, Tab } from 'we-vue'
Vue.use(Tabs).use(Tab)

例子

基本示例

<wv-tabs v-model="active">
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

可滚动

默认情况下标签页多于 4 个时，可以横向滚动 tab，可通过设置 swipe-threshold 阈值，多于这个值时，tab 就支持横向滚动。

<wv-tabs>
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

粘性布局（sticky）

<wv-tabs sticky>
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

禁用标签

<wv-tabs @disabled="onClickDisabled">
  <wv-tab v-for="index in 4" :title="'标签 ' + index" :disabled="index === 2">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

卡片式布局

<wv-tabs type="card">
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

点击事件

<wv-tabs @click="onClick">
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

export default {
  methods: {
    onClick (index) {
      this.$toast.text(`点击 ${index}`)
    }
  }
}

滑动切换

<wv-tabs swipeable>
  <wv-tab v-for="index in 4" :title="'标签 ' + index">
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

自定义标签

<wv-tabs>
  <wv-tab v-for="index in 4">
    <div slot="title">
      <wv-icon type="success-no-circle" :large="false" /> 
      标签 {{ index }}
    </div>
    内容 {{ index }}
  </wv-tab>
</wv-tabs>

Tabs API

Tab API

Tab Slots

Tabs Event