docs_vue2/one/docs/components/tabs.md

Tabs 标签页

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

示例

尺寸

可选的 ui 尺寸属性值：s/m/l。

样式

设置 ui 为 simple/strong 来分别启用简单样式、加强样式。

路由模式

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

禁用状态

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

API

属性

名称	类型	默认值	描述
ui	string=	-	[^ui]
active	string	-	[^active]
matches	function(Route, Route): boolean	tabs.matches	[^matches]
addable	boolean	false	是否可以增加标签。
max	number	-	可增加标签的上限值。
tip	string	-	提示文本。

^^^ui 预设样式。

+++枚举值

值	描述
s	小尺寸样式。
m	中尺寸样式。
l	大尺寸样式。
simple	简单样式。
strong	加强样式。
+++
^^^

^^^active :::badges .sync :::

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

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

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

插槽

名称	描述
default	允许直接内联 Tab 组件。无默认内容。
panel	选项卡下方面板区域。
extra	位于标签页右侧的扩展区域。
tab-item	[^tab-item]
tab-label	标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 tab-item 插槽。

^^^tab-item 标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。

+++参数详情

名称	类型	描述
label	string	选项卡文本。
name	string	选项卡名称。
disabled	boolean=	选项卡是否禁用。
to	string	选项卡路由信息。
native	boolean	路由模式是否强制使用原生的 <a> 元素。
removable	boolean	是否可删除。
status	string	选项卡状态。
+++
^^^

事件

名称	描述
change	切换时触发。回调参数为 (tab: Object)，tab 与作用域插槽中的作用域参数一致。
add	点击添加按钮触发的事件，无回调参数。
remove	删除标签时触发的事件。回调参数为 (tab: Object)，tab 与作用域插槽中的作用域参数一致。

全局配置

名称	类型	默认值	描述
tabs.matches	function	见描述。	[^config-matches]

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

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

^^^

图标

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