vue 自定义tabs 样式的组件

大家应该都用过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>

算实自己封装的一个组件

逻辑就是 根据点击的下标和实际的下标相等的时候 给他一个动态类