[组件库]AntDesignVue框架中a-tab中tab框改造成圆角带有背景

改造前

改造后

CustomTab.vue使用

<CustomTab :tabOpts="tabOpts" />
const tabOpts = ref([{
	label: '待审核',
	value: '1'
}, {
	label: '已审批',
	value: '2'
}])
 

封装组件 CustomTab.vue

<template>
	<div class="row-right">
		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane v-for="opt in tabOpts" :key="opt.value">
				<template #tab>
        			<span class="tab-title">
								{{opt.label}}
        			</span>
				</template>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>
 
<script setup>
import { ref } from 'vue'
const activeKey = ref('1')
 
const props = defineProps({
	tabOpts: {
		type: Array,
		default: () => []
	}
})
</script>
 
<style lang="scss" scoped>
.row-right {
	display: flex;
	align-items: center;
	width: 188px;
	height: 38px;
	border-radius: 8px;
	padding: 4px;
	background-color: #eeeff2;
 
	border: 0.5px solid rgba(255, 255, 255, 1);
 
	:deep(.ant-tabs-ink-bar) {
		display: none !important; /* 移除下划线 */
	}
	:deep(.ant-tabs-tab-active) {
		.tab-title {
			height: 28px;
			border-radius: 16px;
			padding: 4px 16px;
			background: #fff;
			box-shadow: 0px 0px 1px 0px rgba(15, 34, 67, 0.16);
		}
	}
	:deep(.ant-tabs-nav) {
		margin: 0 !important;
	}
	:deep(.ant-tabs-tab) {
		margin: 0 0 0 12px !important;
	}
	.tab-title {
		height: 28px;
		border-radius: 16px;
		padding: 4px 16px;
		background: #eeeff2;
		box-shadow: 0px 0px 1px 0px rgba(15, 34, 67, 0.16);
	}
}
</style>