添加首页歌单cat跳转

src/components/PlaylistType.vue

@@ -9,6 +9,7 @@
                     :class="setAnimationClass('animate__bounceIn')"
                     :style="setAnimationDelay(index <= 13 ? index : index - 13)"
                     v-if="isShowAllPlaylistCategory || index <= 13"
+                    @click="handleClickPlaylistType(item.name)"
                 >{{ item.name }}</span>
             </template>
             <div
@@ -32,6 +33,7 @@ import { onMounted, ref } from "vue";
 import { getPlaylistCategory } from "@/api/home";
 import type { IPlayListSort } from "@/type/playlist";
 import { setAnimationDelay, setAnimationClass } from "@/utils";
+import { useRoute, useRouter } from "vue-router";
 // 歌单分类
 const playlistCategory = ref<IPlayListSort>();
 // 是否显示全部歌单分类
@@ -43,6 +45,15 @@ const loadPlaylistCategory = async () => {
     playlistCategory.value = data;
 };
 
+const router = useRouter();
+const handleClickPlaylistType = (type: any) => {
+    router.push({
+        path: "/list",
+        query: {
+            type: type,
+        }
+    });
+};
 // 页面初始化
 onMounted(() => {
     loadPlaylistCategory();

src/components/common/MPop.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { setAnimationClass, setAnimationDelay } from "@/utils";
+
+const props = defineProps({
+  showPop: {
+    type: Boolean,
+    default: false
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+})
+
+const musicFullClass = computed(() => {
+  if (props.showPop) {
+    return setAnimationClass('animate__fadeInUp')
+  } else {
+    return setAnimationClass('animate__fadeOutDown')
+  }
+})
+
+</script>
+
+<template>
+  <div class="pop-page" v-show="props.showPop" :class="musicFullClass">
+    <i class="iconfont icon-icon_error close" v-if="props.showClose" @click="close()"></i>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pop-page {
+  height: 800px;
+  @apply relative;
+  .close {
+    @apply absolute top-4 right-4 cursor-pointer text-white text-3xl;
+  }
+}
+</style>