blog/src/views/home/navMenu.vue

<template>
  <div class="box flex flex-wrap px-8">
    <n-card :style="{ height: boxH + 'px' }">
      <n-scrollbar :class="`h-[${boxH}px]`" :style="{ height: boxH - 40 + 'px' }">
        <n-collapse default-expanded-names="0" accordion>
          <n-collapse-item v-for="(i, idx) in navList" :name="idx + ''" :key="i.menuClass">
            <template #arrow="{ collapsed }">
              <img :class="{ zhuan: !collapsed }" width="20" height="20" :src="i.icon" alt="">
            </template>
            <template #header>
              <div class="ml-4" :style="{ color: i.color }">
                {{ i.menuClass }}
              </div>
            </template>
            <template #header-extra="{collapsed}">
              <n-icon size="26" :color="i.color">
                <IosArrowDropright :class="{extra_collapsed:!collapsed}"  class="extra_collapse"></IosArrowDropright>
              </n-icon>
            </template>
            <div class="flex flex-wrap items-center">
              <div class="w-[200px] mr-20 my-4" v-for="(j,ii) in i.children">
                <n-popover trigger="hover" animated :delay="1000" width="trigger">
                  <template #trigger>
                    <div>
                      <n-button @click="link(j.menuLink)"  class="btn w-full  hover:text-[white]" type="primary" ghost>
                        <template #icon>
                          <img v-if="!j.exp" width="20" height="20" class="mr-2" :src="j.menuIcon" alt="" @error="navList[idx].children[ii].exp=true">
                          <div :style="{backgroundColor:j.color}" class="w-[20px] h-[20px] text-[12px] text-[white] rounded-full flex justify-center items-center" v-else>{{ j.menuName[0] }}</div>
                        </template>
                        {{ j.menuName }}
                      </n-button>
                    </div>
                  </template>
                  {{ j.menuDesc }}
                </n-popover>

              </div>
            </div>
          </n-collapse-item>
        </n-collapse>
      </n-scrollbar>

    </n-card>
  </div>
</template>

<script setup>
import { IosArrowDropright } from "@vicons/ionicons4";
import { onMounted } from 'vue';

//mark import

//mark data
const navList = ref([])
const isHaveIco = ref(true)
const size = $store.size.usesizeStore()
const boxH = ref(0)

//mark method
function formatNav(list) {
  let menu = []
  let result = []
  list.forEach(i => {
    i.isHaveIco = true
    if (!menu.includes(i.menuClass)) {
      menu.push(i.menuClass)
    }
  });
  menu.forEach(i => {
    const children = list.filter(it => it.menuClass == i)
    result.push({
      menuClass: i,
      children,
      color: children[0].color,
      icon: "https://www.hxyouzi.com/img/svg/menu/" + children[0].icon,
      exp: false,
    })
  })
  console.log(result);

  return result
  // return chunkArrayInGroups(result, 4)

}


function link(url) {
  window.open(url, "_blank")
}
//mark 周期、内置函数等
onMounted(async () => {
  const res = await $http.nav.listNav()
  navList.value = formatNav(res.data)
  // 获取屏幕高度
  const screenHeight = document.documentElement.clientHeight
  boxH.value = screenHeight - size.searchH - size.menuH - 24 - 66
  console.log(66666, navList.value);
})

</script>

<style scoped lang="less">
.box {
  align-items: start;
  
}


:deep(.n-collapse-item__header-main) {
  font-size: 20px;
  align-items: center;
  // justify-content: center;
}

:deep(.n-collapse-item-arrow) {
  align-items: center;
}


// 旋转动画
@keyframes rotate {
  from {
    transform: rotate(0deg);
    /* 起始角度 */
  }

  to {
    transform: rotate(360deg);
    /* 结束角度 */
  }
}

.zhuan {
  // transform: rotate(0deg) !important; 
  animation: rotate 2s infinite;
  /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
}
.btn {
  transition: transform .5s ease-in-out;
  /* 指定过渡属性，持续时长，过渡曲线，何时开始 */
  &:hover {
    transform: translateX(10px);
    background: linear-gradient(to right,  #7FC6E7, #4CAF50);
  };
}
.extra_collapse {
  transform: rotate(0deg);
}
.extra_collapsed {
  transform: rotate(90deg);
}
:deep(.n-card) {
  padding: 30px;
  background: #f1f2f370;
}
</style>