Vue3 + vant + Tab组件动态传递实现选项卡切换

Vue3使用vant框架，使用选项卡组件Tab 标签页，用于在不同的内容区域之间进行切换。并动态传递active等于2，使得“已收货”亮起。

图片示例展示

用到vue3的组件

Tab 标签页
选项卡组件，用于在不同的内容区域之间进行切换。通过 v-model:active 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。

“我的订单”页面实现代码

<template>
  <div class="my-order-list">

    <div class="head-box">
      <van-tabs :active="active" @click-tab="onClickTab">
        <van-tab v-for="item in list" :key="item.type" :title="item.name"></van-tab>
      </van-tabs>

      <div class="list-box" v-for="(item, index) in arrList" :key="index">
        <!-- 控制四个组件 :  -->
        <AfterSalesItem v-if="item.type == 0" :arrList="item.name" class="card"></AfterSalesItem>
        <wait-receive-goods v-if="item.type == 1" class="card"></wait-receive-goods>
        <receive-goods v-if="item.type == 2" class="card"></receive-goods>
        <sale-list-view v-if="item.type == 3" class="card"></sale-list-view>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import AfterSalesItem from './components/item.vue'   					//引入组件
import WaitReceiveGoods from './components/wait-receive-goods.vue'      //引入组件
import ReceiveGoods from './components/receive-goods.vue'  				 //引入组件
import SaleListView from './components/sale-list.vue'  					 //引入组件
import { useRoute } from 'vue-router';

const route = useRoute();

const active = ref();

//定义数组
const list = ref([
  { name: "待发货", type: 0 },
  { name: "待收货", type: 1 },
  { name: "已收货", type: 2 },
  { name: "售后", type: 3 }
])
const arrList = ref([
  { name: "待发货", type: 0 }
])

const onClickTab = ({ title }) => {

  //通过点击返回的title('待发货，已发货....'),来匹配对应的active也就是type
  let type = 0
  if (title == "待发货") {
    type = 0
  } else if (title == "待收货") {
    type = 1
  } else if (title == "已收货") {
    type = 2
  } else if (title == "售后") {
    type = 3
  }

  arrList.value.forEach(i => {
    i.name = title
    i.type = type
  })

}

onMounted(() => {

  //获取“订单售后”传进的active值
  active.value = eval("(" + route.query.active + ")");

  // 根据active来判断，并匹配其代表的含义
  let title = "待发货"
  if (active.value == 0) {
    title = "待发货"
  } else if (active.value == 1) {
    title = "待收货"
  } else if (active.value == 2) {
    title = "已收货"
  } else if (active.value == 3) {
    title = "售后"
  }

  // 将获取到数据塞到本页面用来控制tabs的数组里面
  arrList.value.forEach(i => {
    i.name = title
    i.type = active.value
  })


})
</script>

<style lang="less" scoped>
.my-order-list {
  width: 100%;
  height: 100%;

  .head-box {
    width: 100%;
    background: rgb(245, 245, 245);
  }

  .list-box {
    margin: 0 10px;
    min-height: calc(100vh - 96px - 70px);

    .card {
      margin: 20px 0 0 0;
    }
  }


}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114