Tabs - 选项卡组件

基础使用

hi-tabs 支持传入 list 左侧选项数据列表和 right 右侧内容数据列表，如果不传 right 或 right 数据长度为 0，则右侧内容不显示。 两种数据的数据格式相同，具体数据格式如下：

[
    // list || right
    const listOrRight = [
        {
            name: "展示的文字", // 不传或为空则不显示
            iconName: "图标名称", // 不传或为空则不显示
            disabled: Boolean, // 是否禁用该选项
        }
    ];
];

通过 current 设置当前选中项，通过 @change 事件可以监听选项切换。

<hi-tabs :list="list" :right="rightMenus" :current="current" @change="handleTabChange"></hi-tabs>

布局方向

hi-tabs 支持横向和纵向两种布局方向，默认横向布局，设置 column 属性可切换为纵向布局。

<!-- 纵向布局 -->
<hi-tabs :list="list" :current="current" @change="handleTabChange" column></hi-tabs>

自动滚动

通过设置 autoScroll 属性，可以开启/关闭自动滚动特性，默认开启，即激活项自动滚动到中间位置。

<!-- 关闭自动滚动 -->
<hi-tabs :list="list" :current="current" @change="handleTabChange" :autoScroll="false"></hi-tabs>

等分布局

通过设置 equal 属性，可以开启/关闭等分布局特性，默认关闭，即 item 的 flex 为 1。

<!-- 等分布局 -->
<hi-tabs :list="list" :current="current" @change="handleTabChange" equal></hi-tabs>

两端对齐布局

通过设置 justify 属性，可以开启/关闭两端对齐布局特性，默认关闭，即 items 的 justify-content 为 space-between。

<!-- 两端对齐布局 -->
<hi-tabs :list="list" :current="current" @change="handleTabChange" justify></hi-tabs>

Props

参数	说明	类型	默认值	可选值	版本
hoverClass	item 的 hover-class	String	hi-hover	-	-
list	左侧选项数据列表	Array	[]	-	-
current	选中项的下标	Number	0	-	-
keyName	显示字段的key	String	name	-	-
right	右侧固定菜单数据列表	Array	[]	-	-
autoScroll	是否开启自动滚动	Boolean	true	-	-
column	是否开启纵向布局	Boolean	false	-	-
equal	是否开启等分布局	Boolean	false	-	-
justify	是否开启两端对齐布局	Boolean	false	-	-
scrollWithAnimation	是否开启滚动动画	Boolean	true	-	-

Events

名称	说明	参数
@change	左侧选项点击切换时触发	item: 左侧选项数据。 index: 左侧选项下标
@rightClick	右侧固定菜单项点击时触发	item: 右侧固定菜单选项数据。 index: 右侧固定菜单选项下标

Slots

名称	说明	参数
#item	左侧选项 item	item: 左侧选项数据。 index: 左侧选项下标
#right	右侧整体内容	-
#rightItem	右侧固定菜单 item	item: 右侧固定菜单选项数据。 index: 右侧固定菜单选项下标