标签页 Tabs

基本用法

标签页的基本使用方法。

动态增减标签页

通过设置 :editable="true" 可以开启动态增减标签页。仅在 line | card | card-gutter 生效

附加内容

通过 extra 插槽可以自定义额外显示内容。

高度撑满

设置 full-height 让标签页撑满父容器高度（仅水平方向生效），内容区域自动滚动。scrollbar 默认使用 Scrollbar 组件滚动，设置为 false 时使用原生 overflow 滚动（仅 full-height 为 true 时生效）。

带图标的页签

带有图标的标签页。

懒加载

通过设置 lazy-load 属性，可以让面板在首次激活时渲染。

位置

通过 position 属性可以自定义标签栏的位置。

滚动

支持通过滚轮或者触摸板进行滚动操作，且可以通过 scrollPosition 属性设置滚动位置。

触发方式

通过 trigger 指定触发方式。

不同类型

通过 type 可以设置标签的类型。

API

<tabs> Props

参数名	描述	类型	默认值	版本
active-key (v-model)	当前选中的标签的 key	string|number	-
default-active-key	默认选中的标签的key（非受控状态，为空时选中第一个标签页）	string|number	-
position	选项卡的位置	'left' | 'right' | 'top' | 'bottom'	'top'
size	选项卡的大小	'mini' | 'small' | 'medium' | 'large'	-
type	选项卡的类型	'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule'	'line'
direction	选项卡的方向	'horizontal' | 'vertical'	'horizontal'
editable	是否开启可编辑模式	boolean	false
show-add-button	是否显示增加按钮（仅在可编辑模式可用）	boolean	false
destroy-on-hide	是否在不显示标签时销毁内容	boolean	false	2.27.0
lazy-load	是否在首次展示标签时挂载内容	boolean	false
justify	高度撑满容器，只在水平模式下生效。	boolean	false
full-height	是否高度撑满父容器，内容区域自动滚动（仅水平方向生效）	boolean	false
scrollbar	内容区域滚动方式，为 false 时使用原生 overflow 滚动（仅 full-height 生效），可传对象自定义	boolean | ScrollbarProps	true
animation	是否开启选项内容过渡动画	boolean	false
header-padding	选项卡头部是否存在水平边距。仅对 type 等于 line、text 类型的选项卡生效	boolean	true	2.10.0
auto-switch	创建标签后是否切换到新标签（最后一个）	boolean	false	2.18.0
hide-content	是否隐藏内容	boolean	false	2.25.0
trigger	触发方式	'hover' | 'click'	'click'	2.34.0
scroll-position	被选中 tab 的滚动位置，默认 auto 即会将 activeTab 滚动到可见区域，但不会特意做位置调整	'start' | 'end' | 'center' | 'auto' | number	'auto'

<tabs> Events

事件名	描述	参数
change	当前标签值改变时触发	key: string | number
tab-click	用户点击标签时触发	key: string | number
add	用户点击增加按钮时触发	-
delete	用户点击删除按钮时触发	key: string | number

<tabs> Slots

插槽名	描述	参数
extra	选项卡额外内容	-

<tab-pane> Props

参数名	描述	类型	默认值	版本
title	选项卡的标题	string	-
disabled	是否禁用	boolean	false
closable	是否允许关闭此选项卡（仅在可编辑模式生效）	boolean	true
destroy-on-hide	是否在不显示标签时销毁内容	boolean	false	2.27.0

<tab-pane> Slots

插槽名	描述	参数
title	选项卡标题	-