VAVABUY/components/tabs.vue

<template>
  <view class="tab" :class="isRow ? 'tab_row' : ''">
    <view
      class="tab_list"
      :class="[activeNum == index ? 'active' : '', isRow ? 'tab_list_row' : '']"
      v-for="(item, index) in tabList"
      :key="index"
      @click="tabClick(item, index)"
      :style="{ fontSize: size, height: height }"
    >
      <i class="icon-font" :class="item.icon" v-if="item.icon"></i>
      <image class="img" :src="item.img" v-if="item.img"></image>
      <trans :_t="keyName ? item[keyName] : item" v-if="!isTran" />
      <text v-else>{{ keyName ? item[keyName] : item }}</text>
      <view class="tab-badge" v-if="item.badge > 0">{{ item.badge }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { debounce } from "@/utils";

const props = defineProps({
  tabList: {
    type: Object,
    default: () => [],
  },
  keyName: {
    type: String,
    default: "",
  },
  active: {
    type: Number,
    default: 0,
  },
  size: {
    type: String,
    default: "32rpx",
  },
  height: {
    type: String,
    default: "110rpx",
  },
  isTran: Boolean,
  isRow: Boolean,
});
const emit = defineEmits(["confirm"]);
const activeNum = computed(() => props.active);

const tabClick = (item, index) => {
  emit("confirm", item, index);
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.tab {
  .ver();
  gap: 16rpx;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 16rpx;
  &.tab_row {
    gap: 16rpx 44rpx;
  }
  &::-webkit-scrollbar {
    display: none;
  }
  .tab_list {
    flex: 1;
    padding: 0 24rpx;
    white-space: nowrap;
    color: var(--text-01);
    font-weight: 700;
    // line-height: 60rpx;
    position: relative;
    text-align: center;
    .flex_center();
    &.tab_list_row {
      flex: none;
      height: auto;
      min-width: auto;
    }
    .icon-font {
      .size(48rpx);
      font-weight: 400;
    }
    .img {
      width: 48rpx;
      height: 48rpx;
      display: block;
      margin-right: 6rpx;
    }
    .tab-badge {
      position: absolute;
      top: 16rpx;
      right: 30%;
      min-width: 32rpx;
      height: 32rpx;
      padding: 0 8rpx;
      background-color: #f53f3f;
      color: #fff;
      .size(24rpx);
      border-radius: 16rpx;
      text-align: center;
      line-height: 32rpx;
    }

    &::before {
      position: absolute;
      content: "";
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 50rpx;
      background-color: transparent;
    }
  }

  .active {
    color: var(--black);

    &::before {
      background-color: var(--black);
    }
  }
}
</style>