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

Details

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

07:02