Tui

Tabs 标签页
用于多页面快捷切换的页签栏,支持横向滚动、可关闭、关闭后自动跳转左侧 Tab,适用于后台管理系统等多标签页场景。
基础用法
通过 v-model 绑定当前激活的 tab,tabs 属性设置标签列表。
首页
用户管理
订单列表
系统设置
示例代码
vue
横向滚动
当 Tab 数量超出容器宽度时,自动支持横向滚动,可通过鼠标滚轮(纵向滚轮转横向)或拖拽滚动条操作。
标签页 1
标签页 2
标签页 3
标签页 4
标签页 5
标签页 6
标签页 7
标签页 8
标签页 9
标签页 10
标签页 11
标签页 12
标签页 13
标签页 14
标签页 15
标签页 16
标签页 17
标签页 18
标签页 19
标签页 20

当前激活:tab-1

示例代码
vue
可关闭
设置 closable 开启关闭按钮,关闭当前激活 Tab 后自动跳转到左侧 Tab。单个 Tab 可通过 closable: false 禁用关闭。中键点击也可关闭。
首页
用户管理
订单列表
系统设置
示例代码
vue
尺寸
支持 small / medium / large 三种尺寸,默认为 medium
首页
用户管理
订单列表
首页
用户管理
订单列表
首页
用户管理
订单列表
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
v-model
当前激活 tab 的 key
string
-
tabs
tab 列表
Array<TabsItem>
-
[]
closable
是否可关闭
boolean
-
true
keepAlive
刷新页面时是否保留 tab 列表
boolean
-
true
added 0.7.5
size
尺寸
string
small / medium / large
medium
事件 Events
事件名
说明
回调参数
版本说明
change
切换 tab 时触发
key: string
close
关闭 tab 时触发,外部需据此删除 tabs 数据
key: string
TabsItem
属性名
说明
类型
可选值
默认值
版本说明
key
选项 key,唯一标识
string
-
title
选项标题
string
-
closable
是否可关闭,默认跟随组件 closable
boolean
-
true
基础用法
横向滚动
可关闭
尺寸
属性 Props
事件 Events
TabsItem