Tabs 标签组件

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

🏯基本使用示例

<!-- 全局使用 -->
<hy-tabs :list="list"></hy-tabs>

const list = [{ name: '全部' }, { name: '未核销' }, { name: '已核销' }];

显示徽标

• 通过badge设置徽标属性，可以直接参考hy-badge组件属性配置

<template>
    <hy-tabs :list="list"></hy-tabs>
</template>
<script setup>
    const list = [
        { title: '全部', badge: { isDot: true } },
        { title: '未核销', badge: { value: 5 } },
        { title: '已核销' },
    ];
</script>

自定义读取键

• 通过keyName自定义需要显示的值

<template>
    <hy-tabs :list="list" keyName="title"></hy-tabs>
</template>
<script setup>
    const list = [
        { title: '全部', content: { value: 123 } },
        { title: '未核销' },
        { title: '已核销' },
    ];
</script>

轮播图插槽自定义内容

<template>
    <hy-tabs :list="statusTabs" @clickTabs="clickTabs" @change="change">
        <template #default="{record}">{{record.value}}</template>
    </hy-tabs>
</template>

<script setup>
    const statusTabs = [
        { name: '全部', content: { value: 123 } },
        { name: '未核销' },
        { name: '已核销' },
    ];
    // 点击选项卡执行回调
    const clickTabs = () => {};
    // 滑动轮播图执行回调函数
    const change = () => {};
</script>

自定义轮播图

<template>
    <hy-tabs :list="statusTabs" @clickTabs="clickTabs" @change="change">
        <template #main>
            <!--自定义内容（没有轮播图）-->
        </template>
    </hy-tabs>
</template>

<script setup>
    const statusTabs = [{ name: '全部' }, { name: '未核销' }, { name: '已核销' }];
    // 点击选项卡执行回调
    const clickTabs = () => {};
    // 滑动轮播图执行回调函数
    const change = () => {};
</script>

API

Tabs Props

参数	说明	类型	默认值
current	当前选中标签的索引	number	0
list	选项卡数组	TabsItemVo[]	-
keyName	从list元素对象中读取的键名	string	name
duration	滑块移动一次所需的时间，单位 ms	number	300
scrollable	菜单是否可滚动	boolean	false
lineWidth	滑块长度，数值默认单位px	string|number	20
lineHeight	滑块高度，数值默认单位px	string|number	3
lineColor	滑块颜色	string	-
lineBgSize	滑块背景显示大小，当滑块背景设置为图片时使用	string|number	cover
activeStyle	菜单选择中时的样式	CSSProperties	-
inactiveStyle	菜单非选中时的样式	CSSProperties	-
itemStyle	菜单 item 的样式	string	-
badgeProps	徽标props全局定义(list里的badge优先级高)	BadgeProps	-
swiperHeight	轮播图高度，数值默认单位px	string|number	calc(100% - 44px)
isSwiper	是否出现内容轮播	boolean	false
iconStyle	标签左侧图标样式自定义	CSSProperties	-
customStyle	定义需要用到的外部样式	CSSProperties	-
customClass	自定义外部类名	string	-

Events

事件名	说明	回调参数
click	点击标签时触发	item: TabsItemVo, index: 标签索引值
longPress	长按标签时触发	item: TabsItemVo, index: 标签索引值
change	标签索引改变时触发	item: TabsItemVo, index: 标签索引值

Slots

插槽名	说明	接收值
default	轮播图自定义content值	record: TabsItemVo, index: 索引
left	整体左侧插槽	-
icon	tabs的图标	record: TabsItemVo, index: 索引
content	tabs的内容	record: TabsItemVo, index: 索引
right	整体右侧插槽	-
main	自定义掉底部轮播图	-

Typings

类型说明

export interface TabsItemVo {
    /**
     * tab名称
     * */
    name: string;
    /**
     * 徽标接收的props
     * */
    badge?: HyBadgeProps;
    /**
     * 是否禁用
     * */
    disabled?: boolean;
    /**
     * swiper内容值
     * */
    content?: any;
    [key: string]: any;
}

03:29