大家应该都用过tabs 不同状态显示不同的列表
这种东西其实可以自己封装的 其实是很简单的
做一个这样简单的筛选组件
这样的跟tabs 的效果一样
上代码
<template>
<div class="switch-container">
<div class="box">
<div
class="box-item"
v-for="(item, index) in list"
:key="item.name"
@click="handleSelected(index)"
:class="{ active: selectId === index }"
>
{{ item.name }}
<!-- :style="{ color: selectId === index ? '#ff5f16' : '#333'}" -->
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const selectId = ref(0);
const handleSelected = (e) => {
selectId.value = e;
};
const list = ref([{ name: "推荐" }, { name: "距离" }]);
</script>
<style lang="scss">
.switch-container {
.box {
display: flex;
align-items: center;
background-color: #fff;
// padding: 20px;
padding: 5px;
border-radius: 70px;
font-size: 24px;
.box-item {
padding: 10px 25px;
border-radius: 70px;
}
}
.active {
background-color: #ff5f16;
color: #fff;
transition: background-color 0.3s ease-in-out;
}
}
</style>
算实自己封装的一个组件
逻辑就是 根据点击的下标和实际的下标相等的时候 给他一个动态类
标签:vue,const,自定义,tabs,padding,color,background,ref From: https://blog.csdn.net/lele66688888/article/details/137232888