vue3中，封装tag标签列中，单击进行切换分类

vue3中，封装tag标签列中，单击进行切换分类

效果

代码

封装组件

src\views\attendance\components\pitChecked.vue

<template>
	<div class="pitChecked-box">
		<span
			v-for="item in buttonList"
			:class="typeIndex == item.value ? 'active' : ''"
			@click="handleButton(item.value)"
			:key="item.value"
			>{{ item.key }}
		</span>
	</div>
</template>
<script setup lang="ts" name="pitChecked">
import { ref } from "vue";
const buttonList = [
	{
		value: 0,
		key: "全部"
	},
	{
		value: 1,
		key: "tag分类一"
	},
	{
		value: 2,
		key: "tag分类二"
	}
];
const emit = defineEmits(["handleButton"]);
const typeIndex = ref(0);
const handleButton = (value: any) => {
	typeIndex.value = value;
	emit("handleButton", buttonList[value]);
};
</script>
<style scoped lang="scss">
.pitChecked-box {
	display: flex;
	> span {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		border-radius: 4px;
		background: rgba(0, 0, 0, 0.2);
		color: #fff;
		font-family: PingFang SC;
		font-size: 12px;
		margin-left: 8px;
		cursor: pointer;
	}
	.active {
		background: rgba(0, 117, 255, 1);
	}
}
</style>

引用组件

index.vue

<template>
	<div class="container">
		<PitChecked @handle-button="handleChangePit"></PitChecked>
	</div>
</template>
<script setup lang="ts" name="absenteeism">
import PitChecked from "@/views/attendance/components/pitChecked.vue";
// tag分类选择
const handleChangePit = (value: any) => {
	console.log(value);
};
</script>
<style scoped lang="scss">
.container {
	position: relative;
	flex: 4;
	// margin-bottom: 8px;
	// background: rgb(0 0 0 / 30%);
	border-radius: 10px;
	span {
		font-size: 16px;
		color: #ffffff;
	}
}
</style>