Tabs

选项卡。

引入

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

例子

基本示例

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

可滚动

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

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

粘性布局(sticky)

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

禁用标签

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

卡片式布局

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

点击事件

  1. <wv-tabs @click="onClick">
  2. <wv-tab v-for="index in 4" :title="'标签 ' + index">
  3. 内容 {{ index }}
  4. </wv-tab>
  5. </wv-tabs>
  1. export default {
  2. methods: {
  3. onClick (index) {
  4. this.$toast.text(`点击 ${index}`)
  5. }
  6. }
  7. }

滑动切换

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

自定义标签

  1. <wv-tabs>
  2. <wv-tab v-for="index in 4">
  3. <div slot="title">
  4. <wv-icon type="success-no-circle" :large="false" />
  5. 标签 {{ index }}
  6. </div>
  7. 内容 {{ index }}
  8. </wv-tab>
  9. </wv-tabs>

Tabs API

参数类型说明可选值默认值
typeString样式line, cardline
durationNumber切换动画时间,以秒为单位0.2
line-widthNumber底部指示条宽度(px)
swipe-thresholdNumber滚动阈值,tab 超过该值时可以滚动4
stickyBoolean是否使用粘性布局false
offset-topNumber粘性布局下与顶部的最小距离(px)0
swipeableBoolean是否可以滑动内容切换false

Tab API

参数类型说明可选值默认值
titleString标题
disabledBoolean是否禁用false

Tab Slots

name描述
-标签页内容
title标题,可自定义

Tabs Event

事件名说明参数
click点击标签index: 标签索引, title: 标题
change当前激活标签改变index: 标签索引, title: 标题
disabled点击禁用的标签index: 标签索引, title: 标题