HUI

# Tabs 标签页

# Tabs 概述

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

# Tabs 代码示例

# 基础用法

value 与 Tab-pane 的 name 对应，用于标识当前激活的是哪一项，name 值默认从 0 开始，默认激活第一项。可以使用 v-model 双向绑定数据。

# 禁用

禁用某一项

# 图标

通过设置属性 icon，可以显示一个图标。

# 迷你型

设置属性 size 为 small 可以显示为迷你型，只在 type 为 line 时有效。

# 卡片样式

设置属性 type 为 card 可以显示卡片样式，常用于容器顶部。

# 可关闭和事件

通过设置属性 closable 可以关闭某一项，仅在 type 为 card 时有效。
需结合 @on-tab-remove 事件手动关闭标签页。

# 自定义标签页

设置 label 为 Render 函数后，可以自定义标签页的内容。
📺 学习 Render 函数的内容 (opens new window)

# 附加内容

设置 slot extra 可以在页签右边添加附加操作。

# 不使用动画

通过设置属性 animated 为 false 可以禁用动画。

# 其它样式

可以根据业务自定义 UI，需要一点额外的样式覆盖。

# 是否显示箭头

可以根据业务自定义 UI，需要一点额外的样式覆盖。

# panel显示在右侧

panel 显示在右侧，bar 左侧显示

# Tab关闭确认

使用关闭前回调，打断关闭操作，进行关闭确认，然后决定是否手动关闭当前 tab

# Tabs API

# Tabs props

属性 说明 类型 默认值
value 当前激活 tab 面板的 name，可以使用 v-model 双向绑定数据 String 默认为第一项的 name
type 页签的基本样式，可选值为 line 和 card String line
size 尺寸，可选值为 default 和 small，仅在 type="line" 时有效 String default
closable 是否可以关闭页签，仅在 type="card" 时有效 Boolean false
animated 是否使用 CSS3 动画 Boolean true
showArrow 是否显示箭头(1.0.30之前版本 tab 个数不要超过2个tabs总长度，1.0.31及以上版本无个数限制) Boolean false
arrowOnRight 箭头显示在右侧，需要配合设置 key 使用(1.0.59) Boolean false
iconLeftClassName 左箭头自定义 class(v1.0.59) String -
iconRightClassName 右箭头自定义 class(v1.0.59) String -
panelAbove 使 panel 内容在上，而切换标签在下（功能大体不变）(此组件只在v1.0.11或以上版本有效 ) Boolean false
panelRight 使 panel 内容显示在右侧（当前属性只支持 value 和 height 同时设置，不支持其他属性同时设置）(此组件只在v1.0.12或以上版本有效 ) Boolean false
height 使 panel 内容显示在右侧是设置的最低高度(此组件只在v1.0.12或以上版本有效 ) Number 300
labelWidth panelRight 下有效，设置左边提示文字的宽度，数字为百分比，默认宽度为父节点20%(此组件只在v1.0.12或以上版本有效 ) Number 20
alginDre panelRight 下有效，设置左边提示文字的对其方式 left right 可选 right
isRemoveTab 可关闭 tab 下，表示是否触发关闭前回调，为 false 时配合 on-before-tab-remove 使用(此属性只在v1.0.16版本以及以上有效) Boolean true
lazy tab 页是否进行懒加载，animated 和 panelRight 为 true 时不进行懒加载(v1.0.41) Boolean false

# Tabs events

事件名 说明 返回值
on-click tab 被点击时触发 name
on-tab-remove tab 被关闭时触发 name
on-dblclick tab 被双击时触发 panelAbove 下有效(此属性只在v1.0.16版本以及以上有效) name
on-before-tab-remove tab 关闭时触发，但此时 tab 未关闭，表示 tab 关闭前回调函数(此属性只在v1.0.16版本以及以上有效) index,name

# Tabs methods

方法名 说明
handleRemove 手动关闭 tab 页 this.$refs.xxx.handleRemove(this.curIndex,true)(此属性只在 v1.0.16 版本以及以上有效)
updateBar 手动更新当前选中 tabpane 高亮显示条

# Tabs slot

名称 说明
extra 附加内容

# TabPane props

属性 说明 类型 默认值
name 用于标识当前面板，对应 value，必填项 String | Number -
label 选项卡头显示文字，支持 Render 函数。 📺 学习 Render 函数的内容 String | Function 空
icon 选项卡图标 String -
disabled 是否禁用该选项卡 Boolean false
closable 是否可以关闭页签，仅在 type="card" 时有效 Boolean null