vue分类

先看效果

再看代码

      <category-tab v-model="params.area" name="地区" :list="areaList" />
      <category-tab v-model="params.type" name="类型" :list="typeList" />
      <category-tab v-model="params.order" name="排序" :list="orderList" />

<template>
  <div class="flex items-center">
    <span> {{ name }}： </span>
    <div class="w-3/5">
      <div class="flex">
        <div
          v-for="(item, index) in list"
          :key="index"
          style="flex: 0.1666;"
          class="flex relative justify-center  items-center text-center cursor-pointer"
          @click="handleClick(item, index)"
        >
          <n-tag
            round checkable
            :checked="index === activeIndex" 
          >
            {{ item }}
          </n-tag>
          <div v-if="index !== list.length - 1" class="after-border" />
        </div>
      </div>
    </div>
  </div>
</template>