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> 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10870.html