前文

今天我们来一起实现一个elementui+的标签栏加上角标效果

一、需求确认

为标签栏，设置角标，根据不同的序号，设置颜色

二、开发环节

（1）Html部分

<header class="taskMain-container-header">
			<div>
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane v-for="(item, index) in tabPaneData" :key="item.title" :name="item.title">
						<template #label>
							<span>
								{{ item.title }}
							</span>
							<el-badge v-if="item.number" :type="getBadgeClass(index)" :value="item.number" :max="9999"></el-badge>
						</template>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div class="taskMain-container-header-icon">
				<span>筛选</span>
				<Finished />
			</div>
		</header>

解释：（elementui+官网地址：element-plus.gitee.io/zh-CN/compo… ）

属性补充说明：

徽章属性：

（2）Scss部分

<style scoped lang="scss">
.taskMain-container-header {
		display: flex;
		justify-content: space-between;
		.taskMain-container-header-icon {
			display: flex;
			padding: 10px 0 0 0;
			font-size: 16px;
			height: 22px;
			justify-content: space-between;
			:deep(svg) {
				height: 20px;
			}
		}
                // 此处通过深度选择器去改变Tabs标签内部的内边距（此处是项目需要，可不加）
		:deep(.el-tabs__item) {
			padding: 5px !important;
		}
                // 此处通过深度选择器去改变Tabs标签内部的字体大小
		:deep(.el-tabs__item) {
			font-size: 16px;
		}
		.demo-tabs .custom-tabs-label span {
			vertical-align: super;
			margin-left: 4px;
		}
                // 此处通过深度选择器去更改角标的相对位置
		:deep(.el-badge__content.is-fixed) {
			top: 7px;
			right: 6px;
		}
	}
</style>

（3）Js部分

<script setup>
import { ref } from 'vue';
// 在标签栏中设置首次被选中的标签名字
const activeName = ref('待审核');
const totalNum = ref(0);
const tabPaneData = ref([
	{ title: '待审核', number: 1 },
	{ title: '已办', number: 5 },
	{ title: '即将到期', number: 10 },
	{ title: '超期', number: 20 },
	{ title: '重要事项', number: '' },
]);

const getBadgeClass = (index) => {
	const colors = ['primary', 'success', 'warning', 'info'];
	return colors[index % colors.length];
};

const handleClick = (tab) => {
	// Handle tab click if needed
};
</script>