按字段动态分类数据处理

本案例是写在vant中轮播图组件中插槽右下角自定义指示器里面写

效果，不同类型数据分成不同组，动态显示当前图片在当前组中的位置和当前组总数据数

拿到的是一个数组，里面都是对象数据

每个对象里面都有一个enumPictureCategory，如果他的值是一样的，那么就是同一个类型的数据

这是需求，把相同类型的数据放在一起，展示他们title(同类型数据的title相同)，并且当前展示的类型要突出显示，后面是 该图片在当前类型中的位置/当前类型数据总数

把数据处理成 键值对 对象，把enumPictureCategory作为键，相同enumPictureCategory的数据放在一个数组中作为值，所有键值对放在一个空对象中，几个不同的enumPictureCategory就有几个键值对

每一个键值对的值内部是相同类型的数据，他们的enumPictureCategory和title一样，图片数据不同

<script setup>
import { computed, watchEffect } from "vue";
const props = defineProps({
  housePics: {
    type: Array,
    default: [],
  },
});
//先创建一个空对象用来存储所有的键值对
const swipeGroup = {};
//页面加载监听，否则拿不到数据
watchEffect(() => {
  //处理数据，转成键值对，相同类型放一个键值对，不同的另创键值对
  for (const item of props.housePics) {
    let valueArray = swipeGroup[item.enumPictureCategory];
    if (!valueArray) {
      valueArray = [];
      swipeGroup[item.enumPictureCategory] = valueArray;
    }
    valueArray.push(item);
  }
});
//因为拿到的数据title里面有一些不需要的内容，所以要取出需要的东西
//正则查询
const nameReg = /【(.*?)】/i;
const getName = (name) => {
  const res = nameReg.exec(name);
  return res[1];
  //或者用朴素的方法把不需要的内容替换为空
  // return name.replace("：", "").replace("【", "").replace("】", "").replace("1", "");
};
//这里是处理当前展示图片在当前类型中的位置
//传入的数据是props中拿到的数据的item
const getCategoryIndex = (item) => {
  const valueArray = swipeGroup[item.enumPictureCategory];
  //默认起始位置是0，所以要+1展示
  return valueArray.findIndex((data) => data === item) + 1;
};
</script>

<template >
    <!-- 右下角内容的整体 -->
    <div class="custom">
      <!-- 遍历props接收的数据，对象用value,key遍历 -->
      <template v-for="(value, key, index) in swipeGroup" :key="key">
        <!-- 展示数据当中的title，当前选中的一组突出显示 -->
        <!--本案例是在vant的轮播图组件中插槽右下角自定义指示器里面写，所以active表示当前图片在props中的总数据中的位置 -->
        <span :class="{active: housePics[active]?.enumPictureCategory == key}" class="custom-indicator">
        <!-- 相同类型键值对值的title相同，所以拿第一个的title就可以 -->
        {{ getName(value[0].title) }}
            <!-- 这里是后面的数字，是在title盒子内部共同展示，当前选中的一组才显示数字 -->
            <span v-if="housePics[active]?.enumPictureCategory == key" class="custom-count">
            <!--getCategoryIndex方法在上面js中处理过了，后面是当前键值对值总长度 -->
            <!--本案例是在vant的轮播图组件中插槽右下角自定义指示器里面写，所以active表示当前图片在props中的总数据中的位置 -->
            {{ getCategoryIndex(housePics[active]) }}/{{ value.length }}
            </span>
        </span>
      </template>
    </div>
</template>

  <style lang="less" scoped>
  .custom {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    display: flex;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    
    .custom-indicator {
         margin: 0 5px;
         //选中的键值对突出显示
         &.active {
         padding: 0 3px;
         border-radius: 5px;
         background-color: #fff;
         color: #333;
      }
    }
  }
  </style>