wxapp_shuibei/components/tabsView/index.vue

<template>
  <view
    class="tabs-view"
    :style="{
      '--active-line-color': activeLineColor,
      '--active-line-height': activeLineHeight,
      '--active-line-width': activeLineWidth,
    }"
  >
    <view
      class="tabs-item"
      v-for="item in tabsList"
      :key="item.name"
      @click="$emit('tab-click', item)"
    >
      <text :class="{ active: item.name === activeName }">
        {{ item.name }}</text
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "Tabs",
  // 接收父组件传递的参数
  props: {
    // 标签列表数据
    tabsList: {
      type: Array,
      required: true,
      validator: (value) => {
        // 验证每个标签项是否包含name属性
        return value.every((item) => item.hasOwnProperty("name"));
      },
    },
    // 当前激活的标签名
    activeName: {
      type: String,
      required: true,
    },
    // 激活线颜色
    activeLineColor: {
      type: String,
      default: "#f8c20f", // 默认颜色
    },
    // 激活线高度
    activeLineHeight: {
      type: String,
      default: "4rpx", // 默认高度
    },
    // 激活线宽度
    activeLineWidth: {
      type: String,
      default: "50rpx", // 默认宽度
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-view {
  display: flex;
  align-items: center;
  width: 100%;

  .tabs-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text {
      &.active {
        border-bottom: 4rpx solid var(--active-line-color);
      }
    }
  }
}
</style>