Tabs 标签页

Tabs 组件需要配合 Tab 组件使用。

示例

尺寸

可选的 ui 尺寸属性值：large/small/tiny。

<template>
<article>
  <veui-tabs
    ui="large"
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>

  <veui-tabs
    ui="small"
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
      status="success"
    />
  </veui-tabs>

  <veui-tabs
    ui="tiny"
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
      status="info"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

样式

设置 ui 为 block 来使用边框样式。

<template>
<article>
  <veui-tabs
    ui="block"
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
    />
    <veui-tab
      label="文章评论"
      name="articles"
      status="error"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>
  <veui-tabs
    class="second-tabs"
    ui="block large"
    :active.sync="active"
    :index.sync="index"
  >
    <veui-tab
      label="回答问题"
      name="answers"
      status="warning"
    />
    <veui-tab
      label="文章评论"
      name="articles"
    />
    <veui-tab
      label="分享朋友圈"
      name="shares"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

模式

设置Tab 组件 to 属性来使用路由模式。

<template>
<article>
  <veui-tabs :active="$route.fullPath">
    <veui-tab
      label="子 Tab 1"
      to="/components/tabs/tab"
    />
    <veui-tab
      label="子 Tab 2"
      to="/components/tabs/tab2"
    />
    <veui-tab
      label="子 Tab 3（自定义 slot）"
      to="/components/tabs/tab3"
    >
      <h3>Tab Header</h3>
      <router-view v-if="$route.fullPath === '/components/tabs/tab3'"/>
      <footer>Tab footer</footer>
    </veui-tab>
    <veui-tab
      label="跳转到 Form"
      to="/components/form"
    />
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      active: 'answers',
      index: 0
    }
  }
}
</script>

禁用状态

设置Tab 组件 disabled 属性来使选项卡处于禁用状态。

This is Tab1

This is Tab1

<template>
<article>
  <veui-tabs :index.sync="index">
    <veui-tab label="Tab1">
      <p>This is Tab1</p>
    </veui-tab>
    <veui-tab
      label="Tab2"
      disabled
    >
      <p>This is Tab2</p>
    </veui-tab>
    <veui-tab label="Tab3">
      <p>This is Tab3</p>
    </veui-tab>
    <veui-tab label="Tab4">
      <p>This is Tab4</p>
    </veui-tab>
  </veui-tabs>
  <veui-tabs
    ui="block"
    :index.sync="index"
  >
    <veui-tab label="Tab1">
      <p>This is Tab1</p>
    </veui-tab>
    <veui-tab
      label="Tab2"
      disabled
    >
      <p>This is Tab2</p>
    </veui-tab>
    <veui-tab label="Tab3">
      <p>This is Tab3</p>
    </veui-tab>
    <veui-tab label="Tab4">
      <p>This is Tab4</p>
    </veui-tab>
  </veui-tabs>
</article>
</template>

<script>
import { Tabs, Tab } from 'veui'

export default {
  components: {
    'veui-tabs': Tabs,
    'veui-tab': Tab
  },
  data () {
    return {
      index: 0
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
large大尺寸样式。
small小尺寸样式。
tiny特小尺寸样式。
block边框样式。
activestring-

.sync

表示当前哪个标签页处于激活状态。具体映射的值受标签的属性影响，优先级 to > name。

indexnumber0

.sync

表示当前第几个标签处于激活状态。和 active 互相影响。

matchesfunction(Route, Route): booleantabs.matches

用于给内部的 Tab 组件设置统一的路由匹配逻辑。具体参见 Tab 组件的 to 属性。

当内部的 Tab 组件设置了 matches 属性，将会覆盖在 Tabs 组件上的 matches 属性。

addablebooleanfalse是否可以增加标签。
maxnumber-可增加标签的上限值。
tipstring-提示文本。

插槽

名称描述
tabs-extra位于标签页右侧的扩展区域。默认展现添加按钮、提示、溢出滚动按钮。
tabs-extra-label添加按钮的文本。位于 tabs-extra 内部。默认文本内容为添加 Tab。
tabs-extra-tip提示文本。位于 tabs-extra 内部。无默认内容。
default允许直接内联 Tab 组件。无默认内容。

作用域插槽

名称描述
tab-item

标签选项卡区域，默认内容为选项卡文本。作用域参数为标签属性描述对象。

名称类型描述
labelstring选项卡文本。
namestring选项卡名称。
disabledboolean选项卡是否禁用。
tostring选项卡路由信息。
nativeboolean路由模式是否强制使用原生的 <a> 元素。
removableboolean是否可删除。
statusstring选项卡状态。
tab-item-status显示标签状态的容器。位于 tab-item 内部。作用域参数同 tab-item。默认内容为状态对应的图标。
tab-item-extra选项卡扩展区域。位于 tab-item 内部。作用域参数同 tab-item。默认内容为删除按钮，按钮是否显示受标签 removable 属性影响。

事件

名称描述
add点击添加按钮触发的事件，无回调参数。
remove

删除标签时触发的事件。回调参数为 (tab: Object)，tab 与作用域插槽中的作用域参数一致。

全局配置

名称类型默认值描述
tabs.matchesfunction见描述。

函数签名与 Tab 组件的 to 属性相同。默认值为：

function (current, to) {
  return current.fullPath === to.fullPath
}

图标

名称描述
add添加按钮。
remove清除按钮。
prev往左翻页按钮。
next往右翻页按钮。
success成功状态。
warning警示状态。
info普通信息状态。
error错误状态。