Tabs 标签页
概述#
选项卡切换组件，常用于平级区域大块内容的的收纳和展现。
代码示例#
标签一的内容
基础用法#
value 与 TabPane 的 name 对应，用于标识当前激活的是哪一项，name 值默认从 0 开始，默认激活第一项。可以使用 v-model 双向绑定数据。
<template>
<Tabs value="name1">
<TabPane label="标签一" name="name1">标签一的内容</TabPane>
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
<TabPane label="标签三" name="name3">标签三的内容</TabPane>
</Tabs>
</template>
<script>
export default {
}
</script>
标签一的内容
禁用#
禁用某一项。
标签一的内容
图标#
通过设置属性 icon，可以显示一个图标。
标签一的内容
迷你型#
设置属性 size 为 small 可以显示为迷你型，只在 type 为 line 时有效。
标签一的内容
卡片样式#
设置属性 type 为 card 可以显示卡片样式，常用于容器顶部。
标签一的内容
可关闭#
通过设置属性 closable 可以关闭某一项，仅在 type 为 card 时有效。
需结合 @on-tab-remove 事件手动关闭标签页。
标签一的内容
自定义标签页#
设置 label 为 Render 函数后，可以自定义标签页的内容。
标签1
附加内容#
设置 slot extra 可以在页签右边添加附加操作。
标签一的内容
不使用动画#
通过设置属性 animated 为 false 可以禁用动画。
标签一的内容
标签一的内容
其它样式#
可以根据业务自定义 UI，需要一点额外的样式覆盖。
标签一的内容
右键菜单#
TabPane 开启属性 context-menu，可以配合 slot contextMenu 实现点击右键弹出菜单。
标签一
拖拽调整页签顺序#
开启属性 draggable，并配合事件 @on-drag-drop 可以实现拖拽调整页签顺序。
CSDN 
知乎专栏
掘金
活动直播间
Admin Plus
