分类组件（仿淘宝页面的分类组件)

展示

代码

ps: style 里面的 @include xxx 为全局样式，主要是我开发用于切换主题使用，需要根据实情进行修改，且是未完成品，以后有空进行补全。
classify组件

<template>
  <div :class="{overhidden: !hover}" class="all flex-row" @mouseleave="onHover(false, [])">
    <div class="classify">
      <div class="classify-title middle-title">分类</div>
      <div class="classify-first-list">
        <div class="classify-first-list_item"
          v-for="item in classifies"
          :key="item.value"
          @mouseover="onHover(true, item.child)"
        >
          <span style="float: left;">{{ item.label }}</span>
          <el-icon class="classify-first-list_item-icon"><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
    <div class="classify-recommand">
      <div class="classify-recommand-top flex-row">
        <span class="gongge">天猫</span>
        <span class="gongge">聚划算</span>
      </div>
    </div>
    <div class="classify-dialog" v-show="hover">
      <div class="dialog-left">
        <div class="dialog-left-list">
          <classifyList v-for="item in children.value" :list="item"></classifyList>
        </div>
      </div>
      <div class="dialog-right">
        <div class="middle-title">猜你喜欢</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, reactive, ref } from 'vue';
import classify from './classify'
import classifyList from './classifyList.vue';

const classifies = classify

let hover:Ref<boolean> = ref(false)
let children = reactive({
  value: []
})

function onHover(ishover:boolean, child:Array<Object>){
  children.value = child
  hover.value = ishover
}
</script>

<style lang="scss" scoped>
.overhidden {
  overflow: hidden;
  border-radius: 20px;
  @include bg_color('bg-color');
}

.all{
  position: relative;
  height: 420px;
}
.classify {
  z-index: 1000;
  &-title {
    margin: 10px 0 8px 20px;
  }
  &-first-list {
    @include bg_color('bg-color');
    border-radius: 20px;
    height: 470px;
    width: 220px;
    &_item {
      width: 202px;
      height: 32px;
      padding-left: 18px;
      display: flex;
      cursor: pointer;
      align-items: center;
      position: relative;
      &-icon {
        position: absolute;
        right: 10px;
      }
      &:hover {
        background: rgba(255,80,0,.2);
      }
    }
  }

  &-dialog {
    position: absolute;
    top: 0;
    left: 220px;
    width: 670px;
    z-index: 1000;
    height: 505px;
    border: 3px solid #ff2000;
    @include bg_color('bg-color');
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    .dialog-left {
      width: 390px;
      height: 465px;
      overflow: auto;
      padding: 20px;
      border-right: 1px solid #f4f4f4;
    }
    .dialog-right {
      width: 280px;
      height: 465px;
      overflow: hidden;
      padding: 20px;
    }
  }

  &-recommand {
    display: flex;
    padding-left: 20px;
    &-top {
      margin-top: 8px;
      height: 30px;
      align-items: center;
      .gongge {
        width: 80px;
        font-weight: 800;
        color: #ff2000;
        cursor: pointer;
        font-size: 18px;
      }
    }
  }
}
</style>

classifyList

<template>
  <div class="classifyList">
    <div class="middle-title">
      <span style="cursor: pointer;">{{ props.list.label }}</span>
    </div>
    <div class="classifyList-content flex-row">
      <div class="classifyList-content_one" v-for="item in list.child">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const props = defineProps({
  list: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits<{
  (e: '')
}>()
</script>

<style lang="scss" scoped>
.classifyList {
  margin-bottom: 20px;
  &-content{
    flex-wrap: wrap;
    margin-top: 10px;
    @include color('font-light-color2');
    &_one {
      cursor: pointer;
      margin: 0 16px;
      &:hover {
        color: #ff2000;
      }
    }
  }
}
</style>