GicTab 标签
用法
使用 card 二次封装的标签页组件
基本用法
示例
vue
<template>
<div>
<gicTab :tabList="tabList" v-model:activeKey="activeKey" @tab-change="tabChange" ref="tabs">
<template #customTab="{ item }">
<span>{{ item.label }}</span>
</template>
</gicTab>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { GicTab } from 'ctj-ui-next'
const tabList = ref<any>([
{
key: '1',
label: '未提交',
},
{
key: '2',
label: '已提交',
},
])
const tabs = ref()
const activeKey = ref<string>('2')
const tabChange = (val: any) => {
console.log('val:', val)
console.log('tabs.value:', tabs.value.activeTab) //当没有传activeKey时可使用该方法获取当前选中的页签的key
}
</script><template>
<div>
<gicTab :tabList="tabList" v-model:activeKey="activeKey" @tab-change="tabChange" ref="tabs">
<template #customTab="{ item }">
<span>{{ item.label }}</span>
</template>
</gicTab>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { GicTab } from 'ctj-ui-next'
const tabList = ref<any>([
{
key: '1',
label: '未提交',
},
{
key: '2',
label: '已提交',
},
])
const tabs = ref()
const activeKey = ref<string>('2')
const tabChange = (val: any) => {
console.log('val:', val)
console.log('tabs.value:', tabs.value.activeTab) //当没有传activeKey时可使用该方法获取当前选中的页签的key
}
</script>属性 Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| activeKey | 默认选中的页签 | string | 默认选中第一个页签 | |
| tabList | 页签数据 | PropType<TabPane[]> |
事件 Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| tab-change | activeName 改变时触发 | (val:string) |
插槽 Slots
| 插槽名 | 参数 | 说明 |
|---|---|---|
| customTab | {item 当前页签} | 当显示的页签不是 item.tab 时可自定义传入插槽 |