Tab 标签

该组件在标签多的时候，激活的tab会自动移动到组件的中间位置。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
current	Number	0	当前选中标签的索引	All
list	Array	[]	标签数据，格式见下方	All
vertical	Boolean	false	是否垂直类型	All
height	String,Number	null	高度 vertical=true时，height=null会自动计算 注意：小程序下需要给组件加一个style="flex:1"	All
width	String,Number	null	宽度 vertical=false时，width=null会自动计算	All
indicatorStyle	Object,Boolean	{}	指示器样式 参考c-box的props =false时不显示指示器	All
indicatorAnimation	Boolean	true	开启指示器动画	All
itemStyle	Object	{}	tab项样式 注意：不要使用外边距margin	All
itemActiveStyle	Object	{}	tab项选中样式	All
textStyle	Object	{}	tab项文本样式 参考c-text的props	All
textActiveStyle	Object	{}	tab项文本选中样式 参考c-text的props	All
scrollCntGutter	Number,String,Array	null	滚动条左右内边距， 可以用“,”逗号分隔，数组表示左右	All
divider	Boolean	false	显示分割线	All
dividerProps	Object	{}	分割线配置	All
lessCenter	Boolean	true	tab项不足时是否居中排列	All
keyName	String	name	从list元素对象中读取的键名	All
disabled	Boolean	false	禁用	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

list属性数据格式如下：

[
  // 完整数据
  {
    name:'标签一',
    itemStyle:{},// 项css样式
    itemActiveStyle:{},// 激活项css样式
    itemInnerStyle:{},// 项内层css样式
    itemActiveInnerStyle:{}, // 激活项内层css样式
    textStyle:{}, // 参考c-text组件的props
    textActiveStyle:{}, // 参考c-text组件的props
    badge:{}, // 显示徽章，参考c-badge组件的props
    img:{}, // 显示图片，参考c-img组件的props
    activeImg:{}, // 显示激活图片，参考c-img组件的props
    icon:{}, // 显示图标，参考c-icon组件的props
    activeIcon:{}, // 激活显示图标，参考c-icon组件的props
    indicatorStyle:{} // 指示器css样式
  }
]

事件

事件名	说明
change	tab切换时触发，参数index

插槽

插槽名	说明
before	内容的上插槽
indicator	指示器插槽
after	内容下插槽

示例

<template>
    <c-tab :current="current" :list="tabList" @change="onChange"  />
</template>
<script setup>
import { ref } from 'vue'

const current = ref(0);
const tabList = ['标签一','标签二'];
function onChange(index){
  current.value = index;
}
</script>