封装一个小程序tab切换组件

image.png

为方便使用，封装一个小程序tab切换组件
新建tab.vue：

<template>
  <!-- tab -->
  <view class="tab-box flex">
    <view v-for="item in tabList" :key="item.value" class="tab-item flex1 center-center" @click="bindChangeTab(item.value)">
      <view class="text" :class="{'active' : activeVal == item.value}">
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  tabList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['onChangeTab'])

let activeVal = ref(0)
// 切换
function bindChangeTab(val) {
  activeVal.value = val
  emit('onChangeTab', val)
}

</script>

<style lang="scss" scoped>
.tab-box {
  padding-top: 30rpx;
  background-color: #fff;
  .tab-item {
    .text {
      font-size: 28rpx;
      color: #3E3E3E;
      font-weight: 300;
      letter-spacing: 2rpx;
      padding-bottom: 18rpx;
      border-bottom: 4rpx solid #FFF;
    }
    .active {
      color: #F07043;
      font-weight: 600;
      border-bottom: 4rpx solid #F07043;
    }
  }
}
</style>

使用：

<tab :tabList="tabList" :activeNum="activeVal" @onChangeTab="onChangeTab"></tab>

import Tab from "@/components/Tab/index.vue"

const tabList = ref([
  { name: '已核销订单', value: 0 },
  { name: '未核销订单', value: 1 }
])
let active = ref(0)
let activeVal = ref(0)
function onChangeTab(val) {
  active.value = val
  if (val == 0) {
    getDressingOrderList('1')
  } else {
    getDressingOrderList('0')
  }
}